We Keep Coding

How do i change my HTML page with a form?

I will explain my problem, I have an HTML page "index" with many buttons (all Href linked to other sites), I would like to create a form which writes alone the basic code.
I think an example would explain better, this form is for non-developer, 3 input (name, href, picture) and when you use the form, it updates the index page with a new button who is already linked to the other website.
I was thinking about creating many buttons with display: none, and update these buttons. Or having a script already written who could be filled.
I want these new buttons to stay even if you refresh the page.
My index looks like this :
#{
ViewData["Title"] = "Index";
}
<div style="background-image: url('img/LOGOFIVES.jpg');">
<div class="text-center">
<h5 class="my-4">Bienvenue sur le portail Fives.</h5>
<div class="row m-4">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
<a asp-controller="Order" asp-action="Index" class="btn btn-lg btn-primary btn-block">Ordres</a>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
<a asp-controller="Article" asp-action="Index" class="btn btn-lg btn-primary btn-block">Articles</a>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Portail Qualios
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Saphir
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Base Qualité
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2" onclick="alert([message?: veuillez utiliser Internet Explorer pour utiliser Chronogestor sans problème])">
Chronogestor
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Intranet Fives ECL
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Portail Fives
</div>
</div>
</div>
</div>

If you want other people to see these newly added links/buttons, you have to use some back end language (PHP for example) and a database to store these links. To my knowledge, you can't update the HTML code without any back-end language or server-side apps but if you can, it's neither practical nor commonly used.
What you want is not too complicated so some basic knowledge of a back-end language should be enough.
Good luck!
P.S. If what you mean is to just update those buttons for the current user until they refresh the page, that's a whole different story and you can just accomplish that with JavaScript.

if you want too change the view just for the user
you can do this with java script using this function
function add_button(text, href){
let b = document.createElement("a");
let t = document.createTextNode(text);
b.appendChild(t);
b.setAttribute("href", href)
let element = document.getElementById("div");
element.appendChild(b);
}
and just call it from the submit button in the form

Get Portion of Class Name, in order, on Web Page Using JavaScript?

Is there a way using Javascript, to pull a portion of a class name in order (top to bottom) on a web app? I have an issue where I need to get information on a 3rd party web app we are integrating into our site. I can't change their code. What I want to do is take the class name (e.g. class="index solid-shape-large-rating-fair AnalysisCategory" or class="index solid-shape-large-rating-poor AnalysisCategory" etc.) and grab the value after "rating-" in the class name (class="index solid-shape-large-rating-[want this value] AnalysisCategory"). So in the example I have, I would get back, in this order, top to bottom, "fair", "poor" and "excellent". Is this possible? If so how? Please be aware there will be more mark-up between elements in my example, if that impacts the answer? I just cleaned up the non-related code for presentation purposes. They aren't stacked directly on top of each other as in my example.
///////Top Element//////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR INDUSTRY BORROWING HISTORY</label>
<div class="index solid-shape-large-rating-fair AnalysisCategory">
MODERATE RISK
</div>
</div>
</div>
</div>
//////////////Middle Element////////////////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">TENURE OF YOUR BUSINESS</label>
<div class="index solid-shape-large-rating-poor AnalysisCategory">
POTENTIAL CONCERN
</div>
</div>
</div>
</div>
////////////Bottom Element/////////////
<div class="stack-item" style="">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR BUSINESS PROFITABILITY</label>
<div class="index solid-shape-large-rating-excellent AnalysisCategory">
EXCELLENT
</div>
</div>
</div>
</div>
Thank you!

I found this answer on another site.
$(function() {
$('[class*="solid-shape-large-rating-"]').each(function(i, e) {
var result = this.className.match(/solid-shape-large-rating-(.*?)\s+/);
console.log(result[1]);
});
});

Bootstrap column floating on right side insteaf of left why?

Let's go to exaplain my problem:
I have this html code:
<div id="nodeInitInsertion" class="row removePadd_oddEven_childs"></div>
This is like the parent node where the dynamic content is going to be inserted after an ajax petition. This GET petitions gives us information about what fields should we show in the form (name, lastname, gender, date of birth, and then extra fields)
Here for example we have received all of these (inside there are the inputs but this is the main information you need)
<div id="nodeInitInsertion" class="row removePadd_oddEven_childs">
<div class="col-xs-12 col-sm-6 relative margin-20-t sex_container"></div>
<div class="col-xs-12 col-sm-6 relative margin-10-t dateofbirth_container"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 relative margin-10-t nationality_container"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 email_container margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
</div>
It works all fine the most of the times (fig. 1).
But when there are 9 "div childrens" or more, the design breaks because one of the div.col-xs-12 should be in the left and it is in the right. (fig. 2)
And the strange this is that: If I remove a div.col-xs-12 element before the one is "wrong placed" it goes all OK.
And the most strange this that the element has nothing weird... They have all the same height too.
Did it happen to you anytime? Like: a column of bootstrap that is totally floating left, is floating to the right? why it happens?
Thank you..

Bootsrap Begineer - change width of div with different screen size

I am a beginner to Bootstrap. I am trying to accomplish the following:
To make a div that is 2 columns wide on medium and large viewports and 12 columns on extra small viewports.
I understand that bootstrap works in rows and columns(12) and that the columns have breakpoints at which they 'break' and stack as and how applied when the screen size changes. I am thus not sure how to change the width of a div as above.
Can this be done just by using Bootstrap?
They way I think this could be implemented is using javascript to get the screen size(pixels width) and then changing the width value of the div. What could be the approach? Any leads or suggestions would be helpful.

You can simply add more classes according to the viewport width:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
The above gives you an output of 4 columns for larger viewports, 3 for medium and 2 for smaller.
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Extra small devices Phones = col-xs-n
Small devices Tablets = col-sm-n
Medium devices Desktops = col-md-n
Large devices Desktops = col-lg-n
if you want 2 columns side by side at smaller viewports, you'll need to add them all in the same row:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
This will give you the following output at smaller viewports
Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6

You can easily do this, like so:
<div class="col-xs-12 col-md-2"></div>
It's that easy. At the md breakpoint (970px) and above, that div will occupy 2 columns; prior to that it will occupy 12, but you can change the col-xs-12 to any number you'd like.
The bootstrap grid system is easy to get the hang of and you don't need javascript to use it. Read about it here

No you don't need js for that bootstrap grid system will suffice.
You should consult these docs to understand grid system in details--
w3 schools
example
.col-lg-2, .col-md-2, .col-xs-12
{
background-color: blue; height:500px;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-xs-12">
</div>
</div>
</div>
</body>
</html>

AngularJS ng-repeat, $scope variable issue and preventing infinite $digest loop

I need to find a better solution regarding ng-repeat, $scope variable and infinite $digest loop. I'm sure it's not $watch issue and I'm sure it's in the way I'm updating my $scope variable.
The issue doesn't happen in Chrome. It only happens in Safari and Firefox. This is how I'm doing it. I have a $scope.chartCollection which is dynamically populated with Google Chart objects. The $scope.chartCollection can have 1 or more google chart objects depending on my selection.
In my html template, I have this code,
<div ng-repeat="device in chartCollection">
<div class="col-md-6 padding10px">
<div class="widget enable-top-radius chartProperties">
<div class="widget-title enable-top-radius dark-gray-title">
<h4>
<span class="alignleft">
<i class="fa fa-circle" ng-style="{ color : device.dotColor }"></i><span class="padding5px">{{printerTypeName}}</span><span class="padding5px">|</span><span class="padding5px" popover="{{device.modelOrLocation }}" popover-trigger="mouseenter">{{ device.modelOrLocation }}</span>
</span>
</h4>
<span class="alignright">{{device.location | uppercase }}</span>
<div style="clear: both;" class="padding5px"></div>
</div>
<div class="widget-body">
<div google-chart chart="device.chart" on-select="seriesSelected(selectedItem, $index)"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding chartInfoBox">{{dateForGraph}}</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.leftCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.leftCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.middleCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.middleCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.rightCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.rightCellText"></div>
</div>
</div>
</div>
</div>
so that I can display each chart in separate divs. It works really well in Chrome but not in Firefox and Safari.
I'm getting this error in Firefox and Safari
https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%5D,%5B%5D,%5B%5D,%5B%5D,%5B%5D%5D
And my situation is similar to the second example they mentioned which generates a new array. However, in my situation, it will always be a new array.
I was thinking of not using ng-repeat and use $scope.chart1, $scope.chart2 etc but the problem with this approach is that I cannot tell if there will be 1, 10 or 20 charts since everything is generated dynamically. Code will be very messy!
Update:
Here is the code that generates the chart objects
http://pastebin.com/DmQkDHjW