CSS and Javascript Examples
Below you will find some examples of my coding skills. I am most experienced in HTML and CSS, but i have also begun to dabble into javascript. Please feel free to take a look!
#navbar{
width: 100%;
overflow: auto;
}
#navbar a{
text-decoration: none;
color: hsl(0, 0%, 18%);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 15px;
display: block;
text-align: center;
font-size: 1.5em;
float: left;
background-color:hsl(0, 0%, 67%);
width: 100%;
margin-bottom: 10px;
}
#navbar a:hover{
background-color: hsl(154, 100%, 82%);
}
.sidebar {
min-height: 200px;
width: 0;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background-color: @dark-grey;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
border-radius: 0px 0px 10px 0px;
a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: @light-grey;
display: block;
transition: 0.3s;
&:hover {
color: white;
}
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: @dark-grey;
color: @lightest-grey;
padding: 10px 15px;
border: none;
border-radius: 10px;
font-family: @font1;
&:hover {
background-color: @light-grey;
color: @dark-grey;
}
}
function input() {
const inputElement = document.getElementById("lastnum")
var total = (lastnum.value * costPerTicket + ticketSurcharge)
const namer = document.querySelector('[for="name"]');
namer.style.visibility = "hidden";
const emailer = document.querySelector('[for="address"]');
emailer.style.visibility = "hidden";
const buttons = document.getElementById("buttons");
buttons.style.visibility = "hidden";
if (isNaN(lastnum.value) || lastnum.value <1 || lastnum.value > 3){
inputElement.style.backgroundColor = "yellow";
alert("Value must be between 1 and 3");
}
else {
inputElement.style.backgroundColor = "white";
const totalBox = document.querySelector('[for="totalCost"]').innerHTML = (`Your total cost will be: ${formatter.format(total)}`);
namer.style.visibility = "visible";
emailer.style.visibility = "visible";
buttons.style.visibility = "visible";
}
};
function blurred(ok, check){
check = check || false;
let nameRegEx = "^[A-Za-z]+$";
let emailRegEx = "^[A-Za-z0-9]{1,64}@[A-Za-z0-9]{1,252}\.[A-Za-z]{3}$";
if (ok==="name") {
if(!yourName.value.match(nameRegEx)&& !(yourName.style.backgroundColor === "yellow")){
yourName.style.backgroundColor = "yellow";
alert("Please Input A Valid Name");
return false;
} else if((yourName.style.backgroundColor === "yellow") || check) {
yourName.style.backgroundColor = "";
return true;
}
} else if (ok==="email") {
if(!email.value.match(emailRegEx) && !(email.style.backgroundColor === "yellow")){
email.style.backgroundColor = "yellow";
alert("Please Input A Valid Email");
return false;
} else if ((email.style.backgroundColor === "yellow") || check) {
email.style.backgroundColor = "";
return true;
}
}
}