StringsAndAll
This commit is contained in:
@ -6,8 +6,56 @@
|
||||
<title>Another Junkie site!</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Which one is bigger?</h1>
|
||||
<label for="">Number a: </label>
|
||||
<input type="text" id="numberaa">
|
||||
<label for="">Number b: </label>
|
||||
<input type="text" id="numberba">
|
||||
<input type="button" value="Curiculum" id="TheAnsweer">
|
||||
<p id="answera">The stick of TRUTH</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1 id="thevalueoftruth">CHECKED!</h1>
|
||||
<label for="theboxoftruth">Checkbox: </label>
|
||||
<input type="checkbox" checked id="theboxoftruth">
|
||||
</div>
|
||||
<div>
|
||||
<h1>Radio</h1>
|
||||
<label for="cardiradio">Card1</label>
|
||||
<input type="radio" name="rad1" id="cardiradio"><label for="cardiradio" id="cardiradiolab"></label><br>
|
||||
<label for="cardtradio">Card2</label>
|
||||
<input type="radio" name="rad1" id="cardtradio"><label for="cardtradio" id="cardtradiolab"></label><br>
|
||||
<label for="cardhradio">Card3</label>
|
||||
<input type="radio" name="rad1" id="cardhradio"><label for="cardhradio" id="cardhradiolab"></label><br>
|
||||
|
||||
<input type="button" value="Submit!" id="radiosubmitter">
|
||||
</div>
|
||||
<div></div>
|
||||
<h1>Ternary operations</h1>
|
||||
<label for="cardiradio">Card1</label>
|
||||
<input type="radio" name="rad1" id="cardiradiott" onchange=RadioChanged()><br>
|
||||
<label for="cardtradio">Card2</label>
|
||||
<input type="radio" name="rad1" id="cardiradiott2" onchange=RadioChanged()><br>
|
||||
<label for="cardhradio">Card3</label>
|
||||
<input type="radio" name="rad1" id="cardiradiott3" onchange=RadioChanged()><br>
|
||||
<label for="" id="checkedone"></label><br>
|
||||
<input type="button" value="Submit!" id="radiosubmitter">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Days of the week</h1>
|
||||
<label for="week-slider">Select a day of the week:</label>
|
||||
<input type="range" name="week-slider" min="0" max="6" step="1" value="0" id="daysliderer">
|
||||
<h2 id="daysoftheweek"></h2>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>String manipulation</h1>
|
||||
<label for="textimput">Some string: </label>
|
||||
<input type="text" name="textimput" id="themodifierinputtext" value="Alapszöveg!">
|
||||
<p id="modifiedoutput"></p>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -1,3 +1,86 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
document.getElementById("TheAnsweer").onclick = function(){
|
||||
let a = Number(document.getElementById("numberaa").textContent);
|
||||
let b = Number(document.getElementById("numberba").textContent);
|
||||
if(a > b){
|
||||
document.getElementById("answera").textContent = "Number a is bigger!!!!";
|
||||
}else{
|
||||
document.getElementById("answera").textContent = "Number b is bigger!!!!";
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById("theboxoftruth").onchange = function(){
|
||||
let a = document.getElementById("theboxoftruth").checked;
|
||||
if(a == true){
|
||||
document.getElementById("thevalueoftruth").textContent = "CHECKED!";
|
||||
}else{
|
||||
document.getElementById("thevalueoftruth").textContent = "UNCHECKED!";
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById("radiosubmitter").onclick = function(){
|
||||
document.getElementById("cardiradiolab").textContent = document.getElementById("cardiradio").checked;
|
||||
document.getElementById("cardtradiolab").textContent = document.getElementById("cardtradio").checked;
|
||||
document.getElementById("cardhradiolab").textContent = document.getElementById("cardhradio").checked;
|
||||
};
|
||||
|
||||
|
||||
document.getElementById("daysliderer").onchange = function(){ //The switch
|
||||
let day = "asd";
|
||||
switch(Number(document.getElementById("daysliderer").value)){
|
||||
case 0:
|
||||
day = "Monday";
|
||||
break;
|
||||
case 1:
|
||||
day = "Tuesday";
|
||||
break
|
||||
case 2:
|
||||
day = "Wednesday";
|
||||
break
|
||||
case 3:
|
||||
day = "Thursday";
|
||||
break
|
||||
case 4:
|
||||
day = "Friday";
|
||||
break
|
||||
case 5:
|
||||
day = "Saturday";
|
||||
break
|
||||
case 6:
|
||||
day = "Sunday";
|
||||
break
|
||||
}
|
||||
document.getElementById("daysoftheweek").textContent = day;
|
||||
};
|
||||
|
||||
document.getElementById("themodifierinputtext").onchange = function(){ //Text mods text.trim() will reomve all the widespaces before and after the string
|
||||
let text = document.getElementById("themodifierinputtext").value;
|
||||
let out = document.getElementById("modifiedoutput");
|
||||
if(Boolean(text)){
|
||||
out.innerHTML = "The first letter: " + text.charAt(0) + "<br>";
|
||||
out.innerHTML += "The last letter: " + text.charAt(text.length - 1) + "<br>";
|
||||
out.innerHTML += "First location of the letter 's': " + text.indexOf('s') + "<br>";
|
||||
out.innerHTML += "Last location of the letter 's': " + text.lastIndexOf('s') + "<br>";
|
||||
out.innerHTML += "Uppercase: " + text.toUpperCase() + "<br>";
|
||||
out.innerHTML += "Lovercase: " + text.toLowerCase() + "<br>";
|
||||
out.innerHTML += "Repeate: " + text.repeat(3) + "<br>";
|
||||
out.innerHTML += "Does it starts with 'Awesome': " + text.startsWith("Awesome") + "<br>";
|
||||
out.innerHTML += "Does it ends with 'me': " + text.startsWith("me") + "<br>";
|
||||
out.innerHTML += "Replace letter 'a' with 'o': " + text.replaceAll("a", "o") + "<br>";
|
||||
out.innerHTML += "Fill till 15 with 'o': " + text.padStart(15, "o") + "<br>";
|
||||
out.innerHTML += "Fill till 15 with 'o': " + text.padEnd(15, "o") + "<br>";
|
||||
}else{
|
||||
out.innerHTML = "";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
|
||||
function RadioChanged(){ //ternary operator statement ? true : false
|
||||
document.getElementById("checkedone").textContent =
|
||||
document.getElementById("cardiradiott").checked ? "Card1" :
|
||||
document.getElementById("cardiradiott2").checked ? "Card2" :
|
||||
document.getElementById("cardiradiott3").checked ? "Card3" :
|
||||
"Not this!";
|
||||
};
|
||||
|
Reference in New Issue
Block a user