Web Development Useful Examples

Colors

Define some color variables.

:root {
    --background-color: #1f1f1f;
    --text-color: #afafaf;
    --color-right: #3ae374;
    --color-wrong: #ff3838;
}

body {
  color: var(--text-color);
}

Reseting Default

Using box-sizing: border-box; will include the size of border and padding into height and weight. if border and padding are changed, the whole box size is not affected.

* {
	box-sizing: border-box;
}

Body Default Style

Just some default body style settings.

body {
	background-color: #34495e;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
  width: 100%;
	min-height: 100vh;
	margin: 0;
	overflow: hidden; /* get rid of scroll bars*/
}

Absolute Positioning within a div

The span tag will be putting at some point relative to or within the boxes div.

  <div class="boxes">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <span>Desc Text</span>
  </div>

.boxes {
	position: relative;
}

.boxes span {
	position: absolute;
	top: 0;
	left: 0;
}

Transparent Darker Overlay

Way 1

This can be used in a modal overlay.

<div class="container">

</div>

.container {
	background-color: rgba(0, 0, 0, 0.7);
}

Way 2

/* add a dark overlay */
body::after {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

Basic Button Styling


.btn {
	cursor: pointer;
	background-color: darksalmon;
	border: 0;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	padding: 8px;
}

.btn:active {
	transform: scale(0.98);
	opacity: 0.9;
}

.btn:focus,
select:focus {
	outline: 0;
}

.btn-toggle {
	display: block;
	margin: auto;
	margin-bottom: 20px;
}

Responsive Grid Design

Using Bootstrap

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

CSS Grid Layout

A Complete Guide to Grid


.meals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin-top: 20px;
}

.meal {
  cursor: pointer;
  position: relative;
  height: 180px;
  width: 180px;
  text-align: center;
}

.meal img {
  width: 100%;
  height: 100%;
  border: 4px #fff solid;
  border-radius: 2px;
}

.meal-info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in;
  opacity: 0;
}

.meal:hover .meal-info {
  opacity: 1;
}

.single-meal {
  margin: 30px auto;
  width: 70%;
}

.single-meal img {
  width: 300px;
  margin: 15px;
  border: 4px #fff solid;
  border-radius: 2px;
}

.single-meal-info {
  margin: 20px;
  padding: 10px;
  border: 2px #e09850 dashed;
  border-radius: 5px;
}

.single-meal p {
  margin: o;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.single-meal ul {
  padding-left: 0;
  list-style-type: none;
}

.single-meal ul li {
  border: 1px solid #ededed;
  border-radius: 5px;
  background-color: #fff;
  display: inline-block;
  color: #2d2013;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  margin: 0 5px 5px 0;
}

@media (max-width: 800px) {
  .meals {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .meals {
    grid-template-columns: repeat(2, 1fr);
  }

  .meal {
    height: 200px;
    width: 200px;
  }
}
@media (max-width: 500px) {
  input[type='text'] {
    width: 100%;
  }

  .meals {
    grid-template-columns: 1fr;
  }

  .meal {
    height: 300px;
    width: 300px;
  }
}

Flex Wrap

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Using Variables in CSS

:root {
  --primary-color: #fefefe;
  --secondary-color: #ae0933;
}

body {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

Horizontally Centering a div Inside a div through margin

<div class="container">
  <div id="center">
  </div>
</div>

<style>
.container {
  width: 100%;
}

#center {
  width: 200px;
  height: 200px;
  background-color: blue;

  /* center */
  margin: 0 auto;
}

</style>

JavaScript Get Form Submit Data

signUp.addEventListener("submit", function (event) {
	event.preventDefault();
	// console.log("submit");

	// console.log(event.target)
	const data = new FormData(event.target);
	// console.log(data.get("email"));

	const user_data = {
		name: data.get("name"),
		phone: data.get("phone"),
		password: data.get("password"),
		verifyCode: data.get("code")
	};
}

Infinite Loader

HTML code:

<div class="container">
  <div id="loader" class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>

CSS:


* {
	box-sizing: border-box;
}

body {
	background-color: #296ca8;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding-bottom: 100px;
}

/* animation */
.loader {
	display: flex;
	position: fixed;
	bottom: 50px;
	transition: opacity 0.3s ease-in;
}

.loader.show {
	opacity: 1;
}

.circle {
	opacity: 0;
	background-color: #fff;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 5px;
	animation: bounce 0.5s ease-in infinite;
}

.circle:nth-child(2) {
	animation-delay: 0.1s;
}

.circle:nth-child(3) {
	animation-delay: 0.2s;
}

@keyframes bounce {
	0% {}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

Toggle Setting

<button id="settings-btn" class="settings-btn">
  <i class="fas fa-cog"></i>
</button>

<div class="settings" id="settings">
  <form id="settings-form">
    <div>
      <label for="difficulty">Difficulty</label>
      <select name="" id="difficulty">
        <option value="easy">Easy</option>
        <option value="medium">Medium</option>
        <option value="hard">Hard</option>
      </select>
    </div>
  </form>
</div>


.settings-btn {
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.settings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  height: 70px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

.settings.hide {
  transform: translateY(-100%);
}

const settingsBtn = document.getElementById('settings-btn');
const settings = document.getElementById('settings');

// Settings btn click
settingsBtn.addEventListener('click', () => {
	settings.classList.toggle('hide');
})

Importing Font

@import url('https://fonts.googleapis.com/css?family=Lato');