Skip to content

Instantly share code, notes, and snippets.

@AlanD20

AlanD20/HoverImageChanger.html

Last active April 14, 2022 06:55
Show Gist options
  • Save AlanD20/83283ff6595c2e61c9c1200bfb99f3ee to your computer and use it in GitHub Desktop.
Save AlanD20/83283ff6595c2e61c9c1200bfb99f3ee to your computer and use it in GitHub Desktop.
Download ZIP
HTML codes
Raw
README.md

HTML Practice Codes

Simple HTML Projects as a beginner

Raw
first-popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<style>
button {
background: crimson;
color: white;
padding: 6px auto;
margin: 10px 35%;
font-size: 14px;
font-weight: bold;
}
.popwrap {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
.pop {
text-align: center;
width: 100%;
max-width: 300px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
font-size: 16px;
font-family: arial;
}
.pop a {
text-decoration: none;
color: white;
background: crimson;
padding: 4px 8px;
font-weight: bold;
font-size: 20px;
}
.pop .close {
color: white;
position: absolute;
top: 5px;
right: 8px;
background: black;
font-size: 25px;
font-weight: bold;
display: inline;
padding: 2px 7px;
}
.pop .close:hover {
color: crimson;
cursor: pointer;
}
</style>
</head>
<body>
<button>Click me</button>
<div class="popwrap">
<div class="pop">
<div class="close">X</div>
<div class="content">
<h2>WELCOME</h2>
<p>Subscribe to me!!!</p>
<a href="https://twitter.com/AlanD_2011" target="_blank"
>Click on me for Twitter!</a
>
</div>
</div>
</div>
<script>
const btn = document.querySelector("button");
const pop = document.querySelector(".popwrap");
const cls = document.querySelector(".popwrap .pop .close");
btn.addEventListener("click", () => {
pop.style.display = "block";
});
cls.addEventListener("click", () => {
pop.style.display = "none";
});
pop.addEventListener("click", () => {
pop.style.display = "none";
});
</script>
</body>
</html>
Raw
hamburgerNavbar.html
<html>
<head>
<style>
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--b: #222831;
--lb: #393e46;
--g: #ffd369;
--w: #eeeeee;
}
header {
background: var(--b);
width: 100vw;
/* height: 7.6vh;*/
height: 4rem;
position: relative;
}
nav {
z-index: -1;
background-color: var(--lb);
position: absolute;
top: 0;
left: 10%;
visibility: hidden;
transform: translateY(-100px);
transition: transform 350ms ease-in-out;
}
.active {
top: 100%;
visibility: visible;
transform: translateY(0px);
height: auto;
transition: all 350ms ease-out;
}
.list {
list-style-type: none;
}
.list-items {
border-bottom: 1px var(--w) solid;
}
.item {
text-decoration: none;
display: block;
color: var(--w);
padding: 1rem 4rem;
}
.item:hover,
.item:focus {
color: var(--b);
background: var(--w);
}
.menuToggle {
position: absolute;
padding: 1.3rem;
bottom: 8px;
left: 8%;
cursor: pointer;
transition: transform 300ms ease-in;
}
.ham,
.ham::before,
.ham::after {
content: '';
display: block;
background: white;
width: 1.75rem;
height: 4px;
border-radius: 100vh;
transition: transform 300ms ease-out;
}
.ham::before {
transform: translateY(-7px);
transition: transform 300ms ease-in;
}
.ham::after {
transform: translateY(3px);
transition: all 300ms ease-in;
}
.eks .ham{
background: var(--g);
transform: rotate(45deg);
transition: transform 300ms ease-in,
background 350ms ease-out;
}
.eks .ham::after{
width: 0;
/* opacity:0; you can do that also */
background: var(--g);
transition: width 300ms ease-in,
background 350ms ease-out;
}
.eks .ham::before{
background: var(--g);
transform: rotate(-270deg);
transition: transform 300ms ease-in,
background 350ms ease-out;
}
@media screen and (min-width: 650px)
{
.menuToggle{
display: none;
}
nav{
background: transparent;
visibility: visible;
z-index: 1;
transform: translateY(0);
position: absolute;
left: 7%;
top: 0.75rem;
transition: transform 300ms ease-out;
}
.active {
visibility: visible;
top: 0.75rem;
z-index: 1;
transform: translateY(0);
transition: all 350ms ease-out;
}
.list-items{
display: inline-block;
border: 0;
}
.item{
padding: 0.5rem;
margin-right: 4rem;
font-size: 1.4rem;
}
.item:hover,
.item:focus{
background: transparent;
color: var(--g);
font-weight: 400;
}
}
</style>
<script defer>
const hamT = document.querySelector('.menuToggle');
const nav = document.querySelector('nav');
hamT.addEventListener('click', function() {
nav.classList.toggle('active');
this.classList.toggle('eks');
});
</script>
</head>
<body>
<header>
<nav>
<ul class="list">
<li class="list-items"><a href="#" class="item">About</a></li>
<li class="list-items"><a href="#" class="item">Projects</a></li>
<li class="list-items"><a href="#" class="item">Resume</a></li>
<li class="list-items"><a href="#" class="item">Contact</a></li>
</ul>
</nav>
<div class="menuToggle">
<div class="ham"> </div>
</div>
</header>
</body>
</html>
Raw
HoverImageChanger.html
<html>
<head>
<style>
*, *::after, *::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
background-image: url(//unsplash.it/300/400);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-repeat: no-repeat;
background-color: white;
background-blend-mode: luminosity;
width: 300px;
height: 400px;
position: relative;
transition: background 200ms cubic-bezier(0.06, 0.17, 0.92, 1.03);
}
.main::before{
content: 'Hello Sadq';
color: white;
position: absolute;
text-align: center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding: 50% 1em;
background-color: black;
z-index: 5;
opacity: 0;
transition: opacity 300ms cubic-bezier(0.06, 0.17, 0.92, 1.03);
}
.main:hover{
background-image: url(https://loremflickr.com/300/400);
width: 300px;
height: 400px;
background-repeat: no-repeat;
transition: background 200ms cubic-bezier(0.06, 0.17, 0.92, 1.03);
}
.main:hover::before{
opacity: 0.5;
cursor: pointer;
transition: opacity 300ms cubic-bezier(0.06, 0.17, 0.92, 1.03);
}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>
Raw
todo_List.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todos</title>
<script
src="https://kit.fontawesome.com/692be75aee.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<style>
body {
background: #352f5b;
}
.container {
max-width: 400px;
}
input[type="text"],
input[type="text"]:focus {
color: #fff;
border: none;
background: rgba(0, 0, 0, 0.2);
max-width: 400px;
}
.todos li {
background: #423a6f;
}
.delete {
cursor: pointer;
}
.filtered {
display: none !important;
}
</style>
</head>
<body>
<div class="container">
<header class="text-center text-light my-4">
<h1 class="mb-4">Todo List</h1>
<form class="search">
<input
type="text"
name="search"
class="form-control m-auto"
placeholder="Search..."
/>
</form>
</header>
<ul class="list-group todos mx-auto text-light">
<li
class="list-group-item d-flex justify-content-between align-item-center"
>
<span>Kurdistan</span>
<i class="far fa-trash-alt delete"></i>
</li>
<li
class="list-group-item d-flex justify-content-between align-item-center"
>
<span>Sulaymaniyah</span>
<i class="far fa-trash-alt delete"></i>
</li>
<li
class="list-group-item d-flex justify-content-between align-item-center"
>
<span>Erbil</span>
<i class="far fa-trash-alt delete"></i>
</li>
</ul>
<form class="add text-center my-4">
<label class="text-light">Add a new todo...</label>
<input type="text" name="add" class="form-control m-auto" />
</form>
</div>
<script>
const addFrom = document.querySelector(".add"); //text input for new todo item.
const list = document.querySelector(".todos"); //grab the ul list
const searchBar = document.querySelector(".search input");
//function to generate the template.
const newItem = (item) => {
const code = `<li
class="list-group-item d-flex justify-content-between align-item-center">
<span>${item}</span>
<i class="far fa-trash-alt delete"></i>
</li>`;
list.innerHTML += code; //appending the code.
};
//add todos
addFrom.addEventListener("submit", (e) => {
e.preventDefault();
const todo = addFrom.add.value.trim(); //trim it will remove all the spaces before and after the string.
if (todo.length) {
//returns true or false.
newItem(todo);
}
addFrom.reset(); //clears out everything inside the form
});
//delete todos
list.addEventListener("click", (e) => {
if (e.target.classList.contains("delete")) {
e.target.parentElement.remove(); //deleting the parent
}
});
const filtertodos = (term) => {
Array.from(list.children)
.filter((item) => !item.textContent.toLowerCase().includes(term)) //it will return the texts that does not contain the searching letters because we want to filter out those that we dont need to show it.
.forEach((todo) => todo.classList.add("filtered")); //adding each of them a filtered class
//this one is opposite of the previous code.
Array.from(list.children)
.filter((item) => item.textContent.toLowerCase().includes(term))
.forEach((item) => item.classList.remove("filtered"));
};
searchBar.addEventListener("keyup", (e) => {
const term = searchBar.value.trim().toLowerCase();
filtertodos(term);
});
</script>
</body>
</html>
Raw
WeatherApp.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Accu Weather</title>
<style>
body {
background: #eeedec;
letter-spacing: 0.2em;
font-size: 0.8em;
}
.container {
max-width: 400px;
}
</style>
</head>
<body>
<div class="container my-5 mx-auto">
<h1 class="text-muted text-center my-4">Accu Weather</h1>
<form class="change-location my-4 text-center text-muted">
<label for="city">Enter a location for weather information</label>
<input type="text" name="city" class="form-control p-4">
</form>
<div class="card shadow-lg rounded ">
<!--here is d-none-->
<img src="https://via.placeholder.com/400x300" class="time card-img-top">
<div class="icon bg-light mx-auto text-center">
<!-- icon here later -->
</div>
<div class="text-muted text-uppercase text-center details">
<h5 class="my-3">City name</h5>
<div class="my-3">Weather condition</div>
<div class="display-4 my-4">
<span>temp</span>
<span>&deg;C</span>
</div>
</div>
</div>
</div>
<script>
const key = "fJ6w6OZc2JK8CgA9Jw2XyMT1OlOJ7Gts";
const form = document.querySelector("form");
const card = document.querySelector(".card");
const details = document.querySelector(".details");
const getCity = async city => {
const base = "http://dataservice.accuweather.com/locations/v1/cities/search";
const query = `?apikey=${key}&q=${city}`;
const response = await fetch(base + query);
const data = await response.json();
return data[0];
};
const getWeather = async id => {
const base = "http://dataservice.accuweather.com/currentconditions/v1/";
const query = `${id}?apikey=${key}`;
const response = await fetch(base + query);
const data = await response.json();
return data[0];
};
form.addEventListener("submit", e => {
e.preventDefault();
const city = form.city.value.trim();
update(city).then(data => updateGUI(data));
form.reset();
});
const update = async (city) => {
const ct = await getCity(city);
const wth = await getWeather(ct.Key);
return {
City: ct,
Weather: wth
};
};
const updateGUI = data => {
const { City, Weather } = data;
details.innerHTML = `
<h5 class="my-3">${City.EnglishName}</h5>
<div class="my-3">${Weather.WeatherText}</div><div class="display-4 my-4">
<span>${Weather.Temperature.Metric.Value}</span>
<span>&deg;C</span>`;
if (card.classList.contains('d-none')) {
card.classList.remove('d-none');
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment