css Arsip - Farazinux

Sourcecode New Year Countdown | HTML, CSS, JS

iPunx — Mon, 25 Dec 2023 22:46:01 +0000

Sourcecode New Year Countdown – Tahun baru sudah dekat di depan mata. Pastinya hitung mundur merupakan tampilan yang cukup penting untuk kita ketahui. Lalu, bagaimana cara kita membuat hitung mundur otomatis atau countdown tahun baru?

Berikut ini adalah beberapa contoh sorucecode dan tampilan countdown tahun baru. Hitung mundur tahun baru ini dapat kita buat dengan bahasa pemrograman HTML, CSS dan Javascript. 3 bahasa pemrograman yang sangat populer dan lazim dengan mudah kita gunakan.

Hanya dengan HTML, CSS dan Javascript kita dapat membuat tampilan countdown tahun baru di web atau blog kita. Oleh karena itu, berikut ini adalah contoh sourcecode dan preview tampilan hitung mundur atau countdown tahun baru.

Karena hanya menggunakan HTML, CSS dan Javascript kita tidak harus menggunakan web server untuk menjalankannya. HTML, CSS dan Javascript langsung dapat dibaca oleh web browser. Jadi, anda tinggal copy paste file html, css dan javascript di bawah ini.

1. Tampilan Hitung Mundur New Year

Tampilan hitung mundur countdown tahun baru berikut ini walaupun sederhana namun sangat elegan untuk kita gunakan. Dengan paduan warna dasar merah dan tulisan emas dengan sedikit animasi yang sangat elegan.

Preview Countdown Happy New Year

Berikut ini adalah preview tampilan countdown perhitungan tahun baru. Untuk menggunakannya silahkan copas coding di bawah ini mulai dari file html, css dan javascript.

Donasi Ikhlas

HTML

Copy paste script html berikut ini dengan file editor anda seperti Visual Studio Code, Atom, atau file editor lain kesayangan anda. Kemudian simpanlah pada satu folder dengan nama file index.html.





  
  
  
  New Year Countdown



  
    New Year Countdown
    
    
      
                        00
                        Days
                    
      
                        00
                        Hours
                    
      
                        00
                        Minutes
                    
      
                        00
                        Seconds

CSS

Agar tampilan dapat tertata rapi dan indah, maka kita membutuhkan file CSS. Cascading Style Sheet atau lebih kita kenal dengan CSS merupakan file yang berfungsi mengatur tampilan web.

Untuk membuat tampilan indah hitung mundur seperti di atas, maka dibutuhkan CSS di bawah ini. Sama halnya dengan file html, buatlah file pada folder yang sama dengan file html. Kemudian simpanlah dengan nama file style.css.

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

:root {
  font-family: "Aleo", sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgb(119, 13, 13);
  background: radial-gradient(
    circle,
    rgba(119, 13, 13, 0.92) 64%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

canvas {
  width: 100%;
  height: 100%;
}

/* Thanks Traversy Media for this text background animation tut:
   
*/
.label {
  font-size: 2.2rem;
  background: url("https://res.cloudinary.com/nikita-rudenko/image/upload/v1544906837/stripe_c982eebe592d6c30f2034f5ce80b1fc6.png");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: moveBg 30s linear infinite;
}

@keyframes moveBg {
  0% {
    background-position: 0% 30%;
  }
  100% {
    background-position: 1000% 500%;
  }
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  user-select: none;
}

.time {
  color: #d99c3b;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
}

.time span {
  padding: 0 14px;
  font-size: 0.8rem;
}

.time span div {
  font-size: 3rem;
}

@media (max-width: 740px) {
  .label {
    font-size: 1.7rem;
  }
  .time span {
    padding: 0 16px;
    font-size: 0.6rem;
  }
  .time span div {
    font-size: 2rem;
  }
}

JavaScript (JS)

Agar bisa berfungsi dalam perhitungan mundur atau countdown tahun baru. Maka kita juga sangat membutuhkan file javascript (js). Oleh karena itu, silahkan copy dan pastekan script di bawah ini dalam file yang sama dengan file html dan css di atas. Kemudian simpanlah file tersebut dengan nama script.js.

class Snowflake {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.radius = 0;
    this.alpha = 0;

    this.reset();
  }

  reset() {
    this.x = this.randBetween(0, window.innerWidth);
    this.y = this.randBetween(0, -window.innerHeight);
    this.vx = this.randBetween(-3, 3);
    this.vy = this.randBetween(2, 5);
    this.radius = this.randBetween(1, 4);
    this.alpha = this.randBetween(0.1, 0.9);
  }

  randBetween(min, max) {
    return min + Math.random() * (max - min);
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;

    if (this.y + this.radius > window.innerHeight) {
      this.reset();
    }
  }
}

class Snow {
  constructor() {
    this.canvas = document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");

    document.body.appendChild(this.canvas);

    window.addEventListener("resize", () => this.onResize());
    this.onResize();
    this.updateBound = this.update.bind(this);
    requestAnimationFrame(this.updateBound);

    this.createSnowflakes();
  }

  onResize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
  }

  createSnowflakes() {
    const flakes = window.innerWidth / 4;

    this.snowflakes = [];

    for (let s = 0; s < flakes; s++) {
      this.snowflakes.push(new Snowflake());
    }
  }

  update() {
    this.ctx.clearRect(0, 0, this.width, this.height);

    for (let flake of this.snowflakes) {
      flake.update();

      this.ctx.save();
      this.ctx.fillStyle = "#FFF";
      this.ctx.beginPath();
      this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
      this.ctx.closePath();
      this.ctx.globalAlpha = flake.alpha;
      this.ctx.fill();
      this.ctx.restore();
    }
    requestAnimationFrame(this.updateBound);
  }
}

new Snow();

////////////////////////////////////////////////////////////
// Simple CountDown Clock

const d = document.getElementById("d");
const h = document.getElementById("h");
const m = document.getElementById("m");
const s = document.getElementById("s");

function getTrueNumber(num) {
  return num < 10 ? "0" + num : num;
}

function calculateRemainingTime() {
  const comingYear = new Date().getFullYear() + 1;
  const comingDate = new Date(`Jan 1, ${comingYear} 00:00:00`);

  const now = new Date();
  const remainingTime = comingDate.getTime() - now.getTime();
  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const secs = Math.floor((remainingTime % (1000 * 60)) / 1000);

  d.innerHTML = getTrueNumber(days);
  h.innerHTML = getTrueNumber(hours);
  m.innerHTML = getTrueNumber(mins);
  s.innerHTML = getTrueNumber(secs);

  return remainingTime;
}

function initCountdown() {
  const interval = setInterval(() => {
    const remainingTimeInMs = calculateRemainingTime();

    if (remainingTimeInMs <= 1000) {
      clearInterval(interval);
      initCountdown();
    }
  }, 1000);
}

initCountdown();

2. Sourcecode Hitung Mundur New Year

Sama halnya dengan countdown di atas, berikut ini adalah countdown tahun baru yang menarik. Dengan tampilan tata surya yang indah dan menawan. Silahkan copas file html, css dan javascript di bawah ini dalam satu folder dengan nama index.html, style.css dan script.js.

Preview

Donasi Ikhlas

HTML





    
    
    
        
            
        
    
    
    
        
            
        
    
    
    
        
            
        
    
    
    
        
            
        
    
    
    
        
            
            
        
    
    
    NEW YEAR 
    WINTER SOLSTICE 
    SPRING EQUINOX 
    SUMMER SOLSTICE 
    AUTUMN EQUINOX 
    
    



    
    
    
    


it seems that the earth has gone out of its orbit...

CSS

html {
    box-sizing: border-box;
  }
  html *,
  html *:before,
  html *:after {
    box-sizing: inherit;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: 62.5%;
    background-color: #121212;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .solar-system {
    position: relative;
    width: 100%;
    max-width: 700px;
    padding-top: 100%;
    right: 0;
    bottom: 0;
    transition: all 1.5s ease 0s;
  }
  
  .solar-system.top-pos {
      bottom: -45%;
      transition: all 1.5s ease 0s;
  }
  .solar-system.bot-pos {
      bottom: 45%;
      transition: all 1.5s ease 0s;
  }
  .solar-system.right-pos {
      right: 50%;
      transition: all 1.5s ease 0s;
  }
  .solar-system.left-pos {
      right: -50%;
      transition: all 1.5s ease 0s;
  }
  
  @media (min-width: 700px) {
    .solar-system {
      padding-top: 700px;
    }
  }
  
  
  /*** ORBITS ***/
  
  .orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px dotted rgb(84 84 84 / 15%);
    border-radius: 100%;
    transform: translate(-50%, -50%);
  }
  .orbit-sun {
      width: calc(50%);
      height: calc(50%);
      border: 1px dotted #ff6600;
      background: #ffcc00;
  }
  .orbit-sun:before {
      content: "";
      background: #ff660017;
      width: 99%;
      height: 99%;
      display: block;
      margin-left: 0.5%;
      margin-top: 0.5%;
      border-radius: 100%;
      box-shadow: 0 0 10em 5em #ff66006b, 0 0 100px 50px #ff66006b inset, 0 0 10px 5px #ffcc00f2;
  }
  .orbit.orbit-sun:after {
      content: "SUN";
      color: #ffa200;
      top: 50%;
      position: absolute;
      left: -3.5em;
      transition: left 1s ease 0s;
  }
  .solar-system.right-pos .orbit-sun:after {
      left: calc(3.5em + 350px);
      transition: left 1s ease 0s;
  }
  .orbit-mercury {
      width: calc(100%);
      height: calc(100%);
      transform: translate(-50%, -50%);
  }
  .orbit-venus {
      width: calc(150%);
      height: calc(150%);
      transform: translate(-50%, -50%);
  }
  .orbit-earth {
      width: calc(200%);
      height: calc(200%);
      /* transform: translate(-50%, -50%) rotate(-10deg) !important; */
  }
  .orbit-earth:after {
      content: "";
      border: 2px solid red;
      width: 1em;
      height: 1em;
      display: block;
      position: relative;
      border-color: #54cbeb #54cbeb transparent transparent;
      transform: rotate(-50deg);
      border-width: 2px 2px 0 0;
      top: 52.75%;
      left: -0.5em; 	
      animation: blinker 2s linear infinite;
  }
  .orbit-mars {
      width: calc(280%);
      height: calc(280%);
      transform: translate(-50%, -50%);
  }
  .orbit-asteroids {
      width: calc(380%);
      height: calc(380%);
      transform: translate(-50%, -50%) rotate(0deg);
  }
  
  
  
  /*** PLANETS ***/
  
  .planet {
    position: absolute;
    top: 50%;
    border-radius: 100%;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0s ease 0s;
  }
  .planet-mercury {
      left: -6px;
      width: 10px;
      height: 10px;
      transition-duration: 1s;
      background: #bcc1c9;
  }
  .planet-venus {
      left: -8px;
      width: 14px;
      height: 14px;
      transition-duration: 2s;
      background: #ec5f24
  }
  .planet-earth {
      left: -13px;
      width: 24px;
      height: 24px;
      transition-duration: 3s;
      z-index: 1;
  }
  .planet-mars {
      left: -9px;
      width: 18px;
      height: 18px;
      transition-duration: 4s;
      background: #d83e3c;
  }
  .planet-asteroids {
      left: -40px;
      width: calc(100% + 80px);
      height: 1700px;
      transition: all 5s ease 0s;
  }
  .planet-mercury:before {
      content: "MERCURY";
      color: #bcc1c9;
      margin-left: 15px;
      top: 0px;
      position: absolute;
      height: 10px;
      line-height: 10px;
  }
  .planet-venus:before {
      content: "VENUS";
      color: #ec5f24;
      margin-left: 21px;
      top: 1px;
      position: absolute;
      height: 14px;
      line-height: 14px;
  }
  .planet-earth:before {
      content: "EARTH";
      color: #54cbeb;
      margin-left: 29px;
      top: 1px;
      position: absolute;
      height: 24px;
      line-height: 24px;
  }
  .planet-mars:before {
      content: "MARS";
      color: #d83e3c;
      margin-left: 23px;
      top: 1px;
      position: absolute;
      height: 18px;
      line-height: 18px;
  }
  .planet-asteroids:before, .planet-asteroids:after {
      content: "ASTEROID BELT";
      color: #666666;
      margin-left: 8em;
      top: 36.75%;
      position: absolute;
  }
  .planet-asteroids:after {
      right: 8em;
  }
  .planet-asteroids img + img {
      position: absolute;
      right: 0;
      transform: rotate(180deg);
  }
  .planet-mars:after, .planet-venus:after, .planet-mercury:after, .planet-earth:after {
      content: "";
      background: linear-gradient(105deg, rgba(0,0,0,1), rgba(0,0,0,0.6), transparent, transparent);
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      box-shadow: 0 0 3px 2px #ffffff26;
      opacity: 0.8;
      position: absolute;
      top: 0;
      left: 0;
  }
  .planet-earth:after {
      box-shadow: 0 0 5px 3px #54cbeb5c;
  }
  .planet img {
      width: 100%;
  }
  
  .planet-asteroids img {
      width: initial;
  }
  
  
  
  /*** SELECTED DAYS ***/
  
  .new-year-line, .winter-solstice-line, .spring-equinox-line, .summer-solstice-line, .autumn-equinox-line {
      width: 12em;
      border-bottom: 2px dotted white;
      position: absolute;
      left: -13.35em;
      top: 50%;
      z-index: -1;
      color: white;
      margin-top: -13px;
      margin-left: -50%;
      height: 14px;
      line-height: 1em;
  }
  .new-year-line:after, .winter-solstice-line:after, .spring-equinox-line:after, .summer-solstice-line:after, .autumn-equinox-line:after {
      content: "";
      width: 28px;
      height: 28px;
      display: block;
      float: right;
      position: absolute;
      background: #ffffff00;
      right: -28px;
      top: -1px;
      border: 2px dotted #fff;
      border-radius: 100%;
  }
  
  .winter-solstice-line {
      margin-top: 120px;
      left: -12.05em;
  }
  .spring-equinox-line {
      top: -47.25%;
      left: 58.35%;
  }
  .summer-solstice-line {
    top: 30.35%;
    left: 178.75%;
  }
  .autumn-equinox-line {
      top: 148.5%;
    left: 97.5%;
  }
  
  #cronoNewYear, #cronoWinterSolstice, #cronoSpringEquinox, #cronoSummerSolstice, #cronoAutumnEquinox {
      left: 0;
      position: absolute;
      color: #fff;
      width: 100%;
      bottom: -17px;
      font-size: 1.1em;
  }
  #cronoNewYear span, #cronoWinterSolstice span , #cronoSpringEquinox span, #cronoSummerSolstice span, #cronoAutumnEquinox span {
      font-size: 0.75em;
      color: #666;
  }
  
  
  
  /*** WARNING ***/
  
  #warning {
      position: fixed;
      left: 2em;
      bottom: 2em;
      background: rgb(0 0 0 / 0.75);
      height: 5em;
      width: 45em;
      font-size: 1.35em;
      color: #ffa200;
      z-index: 3;
      text-transform: uppercase;
      padding: 0;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #warning:before {
      content: " ! ";
      z-index: 2;
      font-size: 1.9em;
      margin-left: 1.15em;
      color: #ffa200;
      font-weight: bold;
      margin-top: 5px;
  }
  #warning:after {
      content: "";
      background: #ffa200;
      position: absolute;
      left: 0;
      width: 5em;
      height: 5em;
      z-index: 0;
  }
  #warning p {
      display: block !important;
      float: left;
      width: 100%;
      margin: 0 !important;
      padding-left: 2.5em;
  }
  #warning p:before {
      content: "";
      position: absolute;
      z-index: 1;
      border: 1.75em solid transparent;
      border-bottom: 2.85em solid #040404;
      left: 0.775em;
      top: -0.75em;
  }
  #reload {
      background: rgb(255 162 0);
      border: 0;
      border-radius: 1px;
      padding: 0.5em 0.75em;
      margin-left: 1.5em;
      cursor: pointer;
      outline: none;
  }
  #reload:hover {
      background: #54cbeb;
  }
  
  
  
  /* ARROWS */
  .arrows {
      position: fixed;
      left: 0;
      top: 0px;
      width: 100vw;
      height: 100vh;
  }
  
  .arrows span {
      background: #ffffff;
      padding: 0.5em !important;
      position: absolute;
      cursor: pointer;
      margin: 1em;
      width: 3em;
      height: 3em;
      border-radius: 2px;
      text-align: center;
      line-height: 2em;
      opacity: 0.05;
      box-shadow: 0 0 3px -2px #000;
      transition: all 0.4s ease 0s;
  }
  .arrows span:hover {
      opacity: 0.9;
  }
  .arrows span:before {
      content: "";
      border: 4px solid #121212;
      width: 1.35em;
      height: 1.35em;
      float: left;
      border-left-width: 0;
      border-bottom-width: 0;
      transform: rotate(-45deg);
      margin-left: 0.3em;
      margin-top: 0.6em;
      border-radius: 3px;
  }
  
  .arrows span#down:before {
      transform: rotate(135deg);
      margin-top: 0;
  }
  .arrows span#right:before {
      transform: rotate(45deg);
      margin-left: 0.1em;
      margin-top: 0.35em;
  }
  .arrows span#left:before {
      transform: rotate(-135deg);
      margin-top: 0.3em;
      margin-left: 0.5em;
  }
  
  .arrows span#up, .arrows span#down {
      left: calc(50% - 2.5em);
  }
  .arrows span#down {
      bottom: 0;
  }
  .arrows span#right, .arrows span#left {
      bottom: calc(50% - 2.5em);
  }
  .arrows span#right {
      left: calc(100% - 5em);
  }
  
  .arrows span.active {
      opacity: 0.9;
  }
  
  
  /* ANIMATIONS */
  
  @keyframes blinker {
      0%   { opacity:0;   top:52.85%;}
      40%  { opacity:1;   top:51%;   }
      50%  { opacity:0;   top:51%;   }
      60%  { opacity:1;   top:51%; }
      100% { opacity:0;   top:48.25%;}
  }
  @keyframes spin {
      from {transform: rotate(0deg) }
      to {transform: rotate(-360deg);}
  }

Javascript (JS)

//prevent loading error
document.getElementById('warning').remove();

//short getElementById
elem = function (id){ return document.getElementById(id); }

//get next year
var nextYear = new Date().getFullYear() + 1;

//count until date
var newYearDate = new Date("Jan 1, "+ nextYear + " 00:00:00").getTime();

//title angles
var todayDate = new Date().getTime();	
/**///todayDate = new Date("Apr 3, 2021 00:00:00").getTime();
var todaySecondsLeft = (newYearDate - todayDate) / 1000;
var todayDays = parseInt(todaySecondsLeft / 86400);

var plaDeg = parseInt(todayDays-365);
var degMax = Math.abs(plaDeg) + 15;
var degMin = Math.abs(plaDeg) - 15; 

//planets positions
var randMer = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var randVen = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var randMar = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var style = document.createElement('style'); style.innerHTML = '.orbit-mercury {transform: translate(-50%, -50%) rotate('+randMer+'deg)} .orbit-venus {transform: translate(-50%, -50%) rotate('+randVen+'deg)} .orbit-mars {transform: translate(-50%, -50%) rotate('+randMar+'deg)} .planet-mercury {transform:rotate(-'+randMer+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} .planet-mars {transform:rotate(-'+randMar+'deg)} .planet-earth {transform:rotate('+parseInt(todayDays-365)+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} '; document.head.appendChild(style);

/*screen position*/
function qSel(sel){	return document.querySelector(sel); }
var screenPos = qSel('.solar-system').classList;
if(todayDays<367){ screenPos.add('left-pos');     }
if(todayDays<335){ screenPos.add('top-pos'); 	  }
if(todayDays<280){ screenPos.remove('left-pos');  } 
if(todayDays<230){ screenPos.add('right-pos');    }
if(todayDays<185){ screenPos.remove('top-pos');   }
if(todayDays<158){ screenPos.add('bot-pos');      }
if(todayDays<120){ screenPos.remove('right-pos'); }
if(todayDays<60) { screenPos.add('left-pos'); 	  }
if(todayDays<30) { screenPos.remove('bot-pos');   }


/*arrows*/
function goUp(){ 
    arrowOn('up');
    if(screenPos.contains('bot-pos')){screenPos.remove('bot-pos');} else {screenPos.add('top-pos');}
}
function goDown(){
    arrowOn('down');
    if(screenPos.contains('top-pos')){screenPos.remove('top-pos');} else {screenPos.add('bot-pos');}
}
function goRight(){
    arrowOn('right');
    if(screenPos.contains('left-pos')){screenPos.remove('left-pos');} else {screenPos.add('right-pos');}
}
function goLeft(){	
    arrowOn('left');
    if(screenPos.contains('right-pos')){screenPos.remove('right-pos');} else {screenPos.add('left-pos');}
}
function arrowOn(id){
    elem(id).classList.add('active');
    setTimeout(function(){ elem(id).classList.remove('active'); }, 1000);
}

//detecting arrow key presses
document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 37: goLeft();  break;
        case 38: goUp();   break;
        case 39: goRight();	break;
        case 40: goDown();	break;
    }
});


//countdown vars
var days, hours, minutes, seconds;

//countdown interval
var countDown = setInterval(function() {

    var rightNow = new Date().getTime();
    /**///rightNow = new Date("Apr 3, 2021 00:00:00").getTime();
    var timeTo = newYearDate - rightNow;
    
    days = Math.floor(timeTo / (1000 * 60 * 60 * 24));
    hours = Math.floor((timeTo % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    minutes = Math.floor((timeTo % (1000 * 60 * 60)) / (1000 * 60));
    seconds = Math.floor((timeTo % (1000 * 60)) / 1000);
    
    if(hours<10)hours="0"+hours; 
    if(minutes<10)minutes="0"+minutes; 
    if(seconds<10)seconds="0"+seconds; 
    
    /*new year*/
    var newYearDays;
    if (days<0){ elem("cronoNewYear").style.display='none';	newYearDays = days.toString().substr(1); } else { newYearDays="-"+days; }
    elem("cronoNewYear").innerHTML = days + " DAYS  " + hours + ":" + minutes + ":" + seconds + " LEFT";		
    
    /*leap year*/
    var leapYear = new Date().getFullYear();
    if(((leapYear % 4 == 0) && (leapYear % 100 != 0)) || (leapYear % 400 == 0)) {
        rotationDeg = newYearDays * 0.9836065573770491;
    } else {
        rotationDeg = newYearDays * 0.9863013698630136;
    }
    
    /*earth position*/
    elem("position-earth").style.transform = 'translate(-50%, -50%) rotate('+rotationDeg+'deg';
    
    /*winter solstice*/
    var winSolsDays;
    var wsDays=days-11;			
    if (wsDays<0){ elem("cronoWinterSolstice").style.display='none'; } else { winSolsDays=wsDays	}
    elem("cronoWinterSolstice").innerHTML = winSolsDays + " DAYS  " + hours + ":" + minutes + ":" + seconds + " LEFT";
    
    /*spring equinox*/
    var sprEquiDays;
    var seDays=days-286;			
    if (seDays<0){ elem("cronoSpringEquinox").style.display='none';	} else { sprEquiDays=seDays	}
    elem("cronoSpringEquinox").innerHTML = sprEquiDays + " DAYS  " + hours + ":" + minutes + ":" + seconds + " LEFT";
    
    /*summer solstice*/
    var sumSolsDays;
    var ssDays=days-194;			
    if (ssDays<0){ elem("cronoSummerSolstice").style.display='none'; } else { sumSolsDays=ssDays	}
    elem("cronoSummerSolstice").innerHTML = sumSolsDays + " DAYS  " + hours + ":" + minutes + ":" + seconds + " LEFT";
    
    /*autumn equinox*/
    var autEquiDays;
    var aeDays=days-101;			
    if (aeDays<0){ elem("cronoAutumnEquinox").style.display='none';	} else { autEquiDays=aeDays	}
    elem("cronoAutumnEquinox").innerHTML = autEquiDays + " DAYS  " + hours + ":" + minutes + ":" + seconds + " LEFT";
    
    /*initial opacity*/
    var opacityList = document.querySelectorAll('.planet');
    for(i=0;i
Artikel Sourcecode New Year Countdown | HTML, CSS, JS pertama kali tampil pada Farazinux.

Source Code StopWatch dengan HTML, CSS dan Javascript

iPunx — Sat, 18 Feb 2023 14:26:35 +0000

Source code stopwatch HTML – Stopwatch adalah alat pengukur waktu, biasa digunakan untuk menghitung waktu ketika pertandingan olah raga. Selain itu, stopwatch juga sekarang banyak digunakan ibu-ibu dalam menghitung waktu memasak.

Karena pentingnya stopwatch, kita juga dapat membuat sendiri dengan hanya memanfaatkan HTML, CSS dan Javascript. Walaupun dengan script yang sangat sederhana, namun tampilan yang dihasilkan juga sudah tergolong menarik dan mudah digunakan.

Persiapan Coding Stopwatch HTML

Karena hanya menggunakan html, css dan javascript kita tidak perlu repot-repot menginstall web server. Kita cukup membuka file html yang kita buat dengan web browser secara langsung.

Langkah awal adalah kita buat folder yang menampung file code html, css dan javascript. Misalnya, kita buat folder stopwatch yang berisi tiga file yaitu index.html, style.css dan script.js.

Copy Paste Source Code STOPWATCH

Selanjutnya setelah semua persiapan di atas telah kita lakukan, langkah berikutnya adalah copy paste source code stopwatch di bawah ini.

1. HTML

File pertama yang kita butuhkan adalah file html. HTML berfungsi untuk menampung struktur file aplikasi stopwatch. Selain itu, html merupakan file yang dapat langsung dibaca oleh web browser.

Silahkan copy paste script html berikut ke dalam file index.html yang kita telah buat sebelumnya. Setelah itu, simpan (save) file tersebut.



  
    
    Stopwatch App
    
  
  
    
      Stopwatch
      00:00:00:00

2. CSS

Sama seperti halnya html, css di bawah ini tinggal anda copy paste ke dalam file style.css yang telah anda persiapkan sebelumnya. File css adalah file yang berfungsi untuk mengatur tampilan aplikasi stopwatch agar lebih menarik dan enak dipandang.

.container {
  text-align: center;
  margin-top: 50px;
}

h1 {
  font-size: 40px;
  margin-bottom: 20px;
}

#timer {
  font-size: 60px;
  font-weight: bold;
  margin-bottom: 30px;
}

.controls {
  display: flex;
  justify-content: center;
}

button {
  font-size: 20px;
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

3. Javascript

Langkah terakhir adalah copy paste file javascript di bawah ini ke dalam file script.js. File javascript adalah file logic aplikasi agar aplikasi dapat berjalan dengan baik sesuai dengan keinginan.

Jangan lupa setelah paste file ini ke dalam script.js untuk menyimpannya (save). Pastikan ketiga file di atas sudah anda simpan semua.

let milliseconds = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer;

function startTimer() {
  timer = setInterval(runTimer, 10);
}

function runTimer() {
  milliseconds++;
  if (milliseconds == 100) {
    milliseconds = 0;
    seconds++;
    if (seconds == 60) {
      seconds = 0;
      minutes++;
      if (minutes == 60) {
        minutes = 0;
        hours++;
      }
    }
  }
  document.getElementById("timer").innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds) + ":" + (milliseconds > 9 ? milliseconds : "0" + milliseconds);
}

function stopTimer() {
  clearInterval(timer);
}

function resetTimer() {
  clearInterval(timer);
  milliseconds = 0;
  seconds = 0;
  minutes = 0;
  hours = 0;
  document.getElementById("timer").innerHTML = "00:00:00:00";
}

Demikianlah source code stopwatch html, css dan javascript yang gratis dan bebas anda modifikasi. Terus ikuti farazinux.com untuk selalu mendapatkan informasi terbaru seputar dunia teknologi, desain, template dan hal-hal lain yang sedang tranding.

Artikel Source Code StopWatch dengan HTML, CSS dan Javascript pertama kali tampil pada Farazinux.

Source Code Game Matematika dengan HTML, CSS dan Javascript

iPunx — Thu, 16 Feb 2023 09:10:10 +0000

Source code game matematika – Belajar matematika sering menjadi momok yang menakutkan. Namun, bagaimana apabila belajar matematika dengan game? Tentu akan lebih menarik dan menyenangkan untuk anak-anak kita.

Lebih seru lagi kalau kita buat sendiri game matematika. Bagaimana caranya? Kali ini akan kami bagikan source code game matematika dengan menggunakan html, css dan javascript. Sehingga game matematika ini dapat kita buka dengan mudah hanya dengan aplikasi web browser seperti Chrome, Mozila, Opera, Microsoft Edge atau aplikasi web browser lainnya.

Di bawah ini adalah source code membuat aplikasi game matematika sederhana untuk anak-anak. Pastinya anda tinggal copy paste script html, css dan javascript di bawah ini.

Source Code Game

Langkah pertama adalah persiapkan terlebih dahulu folder yang akan menampung tiga file. Ketiga file yang disiapkan dalam satu folder yang sama adalah index.html, style.css dan script.js.

1. HTML

HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan konten dari halaman web. Fungsi utama HTML adalah untuk menyediakan tag atau tanda yang mendefinisikan bagaimana sebuah dokumen web akan ditampilkan di browser.

Setelah kita memahami fungsi dari html, maka copy dan pastekan script di bawah ini pada file index.html yang telah kita buat seperti langkah di atas. Jangan lupa klik save untuk menyimpan script yang sudah kita pastekan.



  
    
    Game Matematika untuk Anak-Anak
    
  
  
    Game Matematika untuk Anak-Anak

2. CSS

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan tata letak halaman web yang dibuat menggunakan HTML. Fungsi utama CSS adalah untuk memisahkan presentasi tampilan halaman web dari struktur dan konten halaman.

Dari penjelasan fungsi css di atas, maka kita memahami bahwa agar tampilan game matematika ini lebih menarik maka kita tambahkan file style.css. Silahkan adan copy dan pastekan script css di bawah ini pada file style.css.

Setelah kita pastekan, kemudian save (simpan) file tersebut. Anda dapat pula memodifikasi css di bawah agar lebih sesuai dengan selera anda masing-masing.

#question {
  font-size: 24px;
  margin-bottom: 20px;
}

#answer {
  font-size: 24px;
  width: 100px;
}

#result {
  font-size: 24px;
  margin-top: 20px;
}

#next {
  font-size: 24px;
  display: none;
}

3. JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaksi dan efek dinamis pada halaman web. Fungsi utama JavaScript adalah untuk memberikan interaksi pengguna pada halaman web dan meningkatkan pengalaman pengguna.

Nah, logic atau kendali dari aplikasi game matematika sederhana ini ada pada file script.js. Karena file javascript ini adalah pengendali dari aplikasi game matematika yang akan kita buat.

let question = document.getElementById("question");
let answer = document.getElementById("answer");
let result = document.getElementById("result");
let next = document.getElementById("next");

let num1, num2, op, correctAnswer;

generateQuestion();

document.addEventListener("submit", function(event) {
  event.preventDefault();
  
  if (parseInt(answer.value) == correctAnswer) {
    result.innerHTML = "Jawaban benar!";
    next.style.display = "inline";
  } else {
    result.innerHTML = "Jawaban salah. Coba lagi!";
  }
});

document.addEventListener("click", function(event) {
  if (event.target.id == "next") {
    generateQuestion();
    answer.value = "";
    result.innerHTML = "";
    next.style.display = "none";
  }
});

function generateQuestion() {
  num1 = Math.floor(Math.random() * 10) + 1;
  num2 = Math.floor(Math.random() * 10) + 1;
  op = Math.floor(Math.random() * 2);
  
  if (op == 0) {
    question.innerHTML = num1 + " + " + num2 + " = ?";
    correctAnswer = num1 + num2;
  } else {
    question.innerHTML = num1 + " - " + num2 + " = ?";
    correctAnswer = num1 - num2;
  }
}

Disclaimer

Game matematika yang farazinux.com bagikan ini masih sangat sederhana. Silahkan anda modifikasi lebih lanjut untuk lebih seru dan menariknya permainan game matematika ini. Selamat mencoba dan happy coding.

Artikel Source Code Game Matematika dengan HTML, CSS dan Javascript pertama kali tampil pada Farazinux.

Source Code Game Tic Tac Toe Google

iPunx — Wed, 15 Feb 2023 01:36:14 +0000

Source code game google – Salah satu game jadul tapi tetap menarik adalah Tic Tac Toe. Dulu kita memainkan game ini dengan membuat kotak-kotak pada buku untuk mengusir kebosanan saat menunggu jam pelajaran di kelas.

Nah, saat ini jaman sudah berubah. Game seperti ini dapat kita mainkan secara online, bahkan sudah disediakan oleh Google. Namun, tahukah anda bahwa game seperti itu juga dapat kita buat dengan mudah dengan bahasa pemrograman html, css dan javascript.

Berikut ini adalah sorucecode game Tic Tac Toe layaknya yang disediakan oleh google. Anda dapat copas dari sourcecode di bawah ini. Buat 3 file yaitu index.html, style.css dan script.js. Penjelasan selengkapnya silahkan simak di bawah ini.

1. HTML

(Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML digunakan untuk memberi struktur dan format pada konten halaman web, seperti teks, gambar, video, dan audio.

Sehingga dari devinisi di atas, dalam membuat game Tic Tac Toe Google ini, kita membutuhkan script html untuk membuat kerangka game. Dengan html ini, maka game Tic Tac Toe Google dapat berjalan dengan baik di web browser.

Langkah pertama untuk membuat game tic tac toe Google ini adalah membuat folder yang akan menampung tiga file, yaitu html, css dan javascript. Setelah folder anda siap silahkan buat file index.html kemudian copy sorucecode di bawah ini kemudian paste ke file index.html.




    Tic Tac Toe
    


    
        Tic Tac Toe

2. CSS

(Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk memformat dan memperindah halaman web. CSS digunakan bersama dengan HTML dan JavaScript untuk membuat halaman web yang menarik dan interaktif.

Agar tampilan game tic tac toe google yang kita buat lebih menarik dan interaktif, maka css adalah solusinya. Dengan css ini maka tampilan akan lebih menarik.

Silahkan anda buat file style.css pada folder yang sama dengan index.html, kemudian copy dan pastekan sourcecode di bawah ini.

.container {
    margin: 50px auto;
    text-align: center;
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px;
    width: 300px;
    height: 300px;
    margin: 20px auto;
}

.square {
    background-color: #8f0404;
    border: 2px solid #000;
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.square:hover {
    background-color: #f5f5f5;
}

#message {
    margin: 20px 0;
    font-size: 24px;
    font-weight: bold;
}

#reset {
    background-color: #790404;
    border: 2px solid #000;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
}

#reset:hover {
    background-color: #f5f5f5;
}


.square.x::before {
  content: 'X';
}

.square.o::before {
  content: 'O';
}

3. JAVASCRIPT

JavaScript adalah bahasa pemrograman yang sering digunakan untuk membuat halaman web yang interaktif dan dinamis. Fungsi dari JavaScript adalah digunakan bersama dengan HTML dan CSS untuk membuat aplikasi web, game, animasi, dan banyak hal lainnya.

Sehingga dengan javascript, game tic tac toe google akan lebih interaktif dan dapat dijalankan. Silahkan buat file dengan nama script.js pada folder yang sama dengan index.html dan style.css, kemudian copy dan pastekan sourcecode di bawah ini.

const squares = document.querySelectorAll('.square');
const message = document.getElementById('message');
const resetButton = document.getElementById('reset');
let playerTurn = true;
let gameOver = false;
let board = ['', '', '', '', '', '', '', '', ''];

// Function to check if the game is over
function checkGameOver() {
  // Check rows
  for (let i = 0; i < 9; i += 3) {
    if (board[i] !== '' && board[i] === board[i + 1] && board[i] === board[i + 2]) {
      gameOver = true;
      return board[i];
    }
  }
  // Check columns
  for (let i = 0; i < 3; i++) {
    if (board[i] !== '' && board[i] === board[i + 3] && board[i] === board[i + 6]) {
      gameOver = true;
      return board[i];
    }
  }
  // Check diagonals
  if (board[0] !== '' && board[0] === board[4] && board[0] === board[8]) {
    gameOver = true;
    return board[0];
  }
  if (board[2] !== '' && board[2] === board[4] && board[2] === board[6]) {
    gameOver = true;
    return board[2];
  }
  // Check for tie
  if (!board.includes('')) {
    gameOver = true;
    return 'tie';
  }
  return '';
}

// Function to reset the game
function reset() {
  playerTurn = true;
  gameOver = false;
  board = ['', '', '', '', '', '', '', '', ''];
  message.textContent = '';
  squares.forEach(square => {
    square.classList.remove('x');
    square.classList.remove('o');
    square.removeEventListener('click', makeMove);
    square.addEventListener('click', makeMove);
  });
}

// Function to make a move
function makeMove(event) {
  if (gameOver) return;
  const square = event.target;
  const index = Array.from(squares).indexOf(square);
  if (board[index] !== '') return;
  board[index] = playerTurn ? 'x' : 'o';
  square.classList.add(playerTurn ? 'x' : 'o');
  square.removeEventListener('click', makeMove);
  const winner = checkGameOver();
  if (winner !== '') {
    if (winner === 'tie') {
      message.textContent = "It's a tie!";
    } else {
      message.textContent = `${winner.toUpperCase()} wins!`;
    }
    gameOver = true;
    return;
  }
  playerTurn = !playerTurn;
  if (!playerTurn) {
    // Make computer move
    const availableSquares = Array.from(squares).filter(square => !square.classList.contains('x') && !square.classList.contains('o'));
    const randomIndex = Math.floor(Math.random() * availableSquares.length);
    availableSquares[randomIndex].dispatchEvent(new Event('click'));
  }
}

// Initialize the game
resetButton.addEventListener('click', reset);
squares.forEach(square => {
  square.addEventListener('click', makeMove);
});

Setelah selesai paste sourcecode di atas, jangan lupa anda simpan (save). Sedangkan untuk menjalankan game tic tac toe google ini cukup anda klik double file index.html atau open dengan browser kesayangan anda, sangat mudah kan?

Demikianlah source code game google Tic Tac Toe yang dapat anda buat sendiri dengan mudah dan cepat. Anda juga dapat mengembangkan dan memodifikasi game ini. Terus ikuti farazinux.com untuk mendapatkan update terbaru.

Artikel Source Code Game Tic Tac Toe Google pertama kali tampil pada Farazinux.

Neon Icon Glowing dengan HTML dan CSS

iPunx — Sat, 14 May 2022 06:09:02 +0000

Neon icon glowing adalah mendekorasi icon yang kita buat di website atau aplikasi kita dengan memanipulasi menggunakan CSS. Dalam mendekorasi icon ini kita menggunakan native CSS, tanpa menggunakan bootstrap ataupun tailwind css.

Walaupun hanya menggunakan native CSS, akan tetapi efek yang diberikan sudah sangat elegan dan modern. Neon icon glowing ini dapat anda implementasikan pada icon yang ada pada web atau aplikasi lainnya berbasis web.

Walaupun saat ini bootstrap dan tailwindcss sangat populer. Akan tetapi, menggunakan native juga masih sangat relevan. CSS Flex tetap kita gunakan agar tampilan kita lebih responsive.

Icon yang akan kita buat glowing atau memiliki efek neon tidak berasal dari img html. Namun kita akan memanfaatkan icon fontawesome. Sehingga load image atau icon akan lebih ringan dan cepat.

Berikut ini adalah tampilan efek neon glowing css html yang akan kita buat. Di bagian akhir artikel ini juga akan kami sertakan link download codingan yang sudah kita buat.

Untuk langkah-langkah coding Icon Neon Glowing silahkan ikuti berikut ini.

Buat File index.html

Langkah pertama yang harus kita lakukan adalah membuat file index.html. File ini berisi code html. Perhatikan dan buat seperti source code html sebagai berikut:




  
  
  CSS Neon Glowing Icons

Dari codingan html di atas, kita mengambil style.css untuk mengatur tampilan neon glowing icon ini. Selain itu, kita juga akan mengimport font-awesome.min.css untuk bisa membuat icon dengan mudah. Karena font awesome memiliki banyak sekali icon-icon yang keren dan sering kita butuhkan.

Setelah itu, pada tag body kita membuat class container yang berisi list icon yang akan kita berikan efek glowing dan neon bercahaya.

Setelah file index.html itu kita buat, selanjutnya kita buat file style.css yang akan kita hubungkan dengan index.html untuk mengatur tampilan.

Coding Style.css

Pada folder yang sama dengan index.html, kita buat file style.css. Untuk lebih jelasnya akan kita uraian codingan style.css sebagai berikut:

Mengatur Body html

Untuk pengaturan body pada tampilan neon kali ini dapat kita lihat pada coding css sebagai berikut.

* {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100vh;
    width: 100vw;
    background: #18191f;
  }

Secara umum aplikasi ini kita atur dengan margin dan padding 0. Sedangkan pada bagian body kita atur tinggi 100vh dan lebar 100vw dengan background warna yang dapat kita atur sendiri.

Pengaturan Container

Container yang mengatur tata letak icon kita coding sebagai berikut:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  }

Display html flex, kemudian diatur horizontal dan vertikal posisi center atau tengah. Sedangkan tinggi dan lebarnya kita buat 100.

CSS icon

Kita telah membuat icon apple, twitter, github, facebook, linux, google dan windows. Sehingga kita juga akan membuat efek pada masing-masing id sesuai dengan icon font awesome yang telah kita buat.

Untuk mengatur efek neon glowing pada icon yang sudah kita buat pada html, silahkan perhatikan code CSS sebagai berikut:

#apple,
  #twitter,
  #github,
  #facebook,
  #windows,
  #google,
  #linux{
    font-size: 8em;
    background-color: #18191f;
    color: #fff;
    box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
      2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
      inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
      inset 2px 2px 10px #00000080;
    border-radius: 29px;
    padding: 11px 19px;
    margin: 0 40px;
    animation: animate 3s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
      0 0 200px #0072ff;
  }
  #twitter {
    animation-delay: 0.3s;
  }
  #facebook {
    animation-delay: 0.7s;
  }
  #github {
    animation-delay: 0.1s;
  }
  #linux {
    animation-delay: 0.3s;
  }
  #google {
    animation-delay: 0.2s;
  }
  #windows {
    animation-delay: 0.4s;
  }
  @keyframes animate {
    from {
      filter: hue-rotate(0deg);
    }
    to {
      filter: hue-rotate(360deg);
    }
  }

Pada id masing-masing icon tersebut kita atur sedemikian rupa, sehingga efek pada masing-masing icon seperti tidak sama pada satu waktu.

Video Tutorial dan Link Download

Untuk lebih memahami dan mempermudah cara pembuatan neon icon glowing, silahkan simak baik-baik tutorial video beriut ini. Anda juga dapat mengunduh atau mendownload pada link berikut ini.

Yap, inilah cara membuat icon dengan efek neon glowing yang keren, tetapi dengan coding yang sangat sederhana.

Artikel Neon Icon Glowing dengan HTML dan CSS pertama kali tampil pada Farazinux.

Cara Membuat Kalkulator dengan HTML dan CSS

iPunx — Fri, 13 May 2022 10:14:47 +0000

Cara membuat kalkulator dengan HTML dan CSS – Dengan coding HTML yang simple kita sudah dapat membuat kalkulator sederhana. Namun dengan bantuan CSS desain kalkulator akan terlihat lebih menarik.

Pada coding pembuatan kalkulator kali ini, kita hanya menggunakan script HTML dan CSS, tanpa bantuan bahasa pemrograman seperti javascript, python, php atau bahasa pemrograman keren lainnya.

Kalkulator yang kita buat sudah meliputi operasi aritmatika dasar. Seperti kalkulator yang baisa beredar di pasaran, coding kalkulator ini sudah meliputi operasi penjumlahan, pengurangan, perkalian, dan pembagian.

Mencoba Aplikasi Kalkulator HTML CSS

Anda dapat melihat hasil coding kalkulator sederhana dengan HTML dan CSS seperti pada aplikasi berikut ini.

Tampilan kalkulator yang kita buat ini mirip seperti kalkulator fisik. Walaupun sederhana, kalkulator ini powerfull untuk digunakan.

Walaupun sepertinya kompleks, namun anda dapat membuat kalkulator seperti di atas hanya dengan menggunakan aplikasi text editor sederhana seperti notepad. Tinggal copy paste source code di bawah dan lakukan seperti petunjuk penempatannya.

Kalkulator yang akan kita buat kali ini hanya memanfaatkan HTML dan CSS. Sangat ringkas dan sederhana tanpa banyak menggunakan tools.

Pertama, Membuat File index.html

Langkah pertama yang harus kita lakukan adalah membuat file index.html. File ini berisi kode HTML untuk membuat kalkulator. Apabila anda menggunakan text editor sederhana seperti notepad, anda tinggal buat file baru kemudian simpan dengan nama index.html.

Anda dapat membuat format tampilan kalkulator dengan HTML. Untuk source code HTML Kalkulaktor dapat anda lihat pada source code kalkulator di bawah ini:



	
		Karce

Dari codingan html di atas, kita membuat kalkulator dengan memanfaatkan inputan text readonly agar inputan hanya bisa dilakukan dengan menggunakan button (tombol).

Selanjutnya kita buat button angka 0 – 9, button C (clear) dan button matematika (penambahan, pengurangan, perkalian dan pembagian). Masing-masing button ketika diklik akan mengeksekusi perintah tertentu. Silahkan anda perhatikan pada event onclick masing-masing button.

Kalau dengan hanya menggunakan html saja, pastinya tampilkan kalkulator tidak akan bisa menarik. Untuk itu, kita membutuhkan code CSS (Cascading Style Sheet) agar tampilan kalkulator yang kita buat lebih menarik dan terlihat seperti aplikasi profesional.

Kedua, Membuat File style.css

File style.css berfungsi untuk membuat tampilan kalkulator berbasis HTML dan CSS ini lebih elegan dan menarik. Source code CSS untuk memodifikasi tampilan HTML kalkulator ini juga sangat mudah difahami. Perhatikan per bagian yang akan kita jabarkan berikut ini.

Mengatur Body HTML

Agar tampilan utama kalkulator HTML CSS ini lebih menarik, maka bagian body html kita berikan efek gradien background. Selain itu, pada bagian body kita juga akan mengatur jenis huruf (font) yang akan kita gunakan pada aplikasi calculator HTML CSS ini.

Berikut ini code CSS untuk mengatur background aplikasi kalkulator HTML CSS.

body {
    background: linear-gradient(270deg, transparent, #02c8cf);
	font-family: Tahoma;
}

CSS untuk div Container

Pada div container kita akan mengatur agar tampilan kalkulator berada pada tengah layar. Dengan codingan CSS kita dapat mengatur posisi aplikasi kalkulator. Berikut ini adalah code CSS nya.

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
}

Mempercantik Skin Kalkulator

Skin kalkulator yang kita buat harus memiliki tampilan yang elegan dan keren. Nah, untuk membuat tampilan yang keren, kita butuh CSS. Anda dapat memodifikasi tampilan skin kalkulator dengan merubah sudut ataupun warna skin kalkulator HTML CSS ini.

Silahkan perhatikan source code skin kalkulator berikut ini.

#container {
	width: 200px;
	padding: 8px 8px 20px 8px;
	margin: 20px auto;
	background-color: #ABABAB;
	border-radius: 4px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
}

Mengatur Display Inputan Kalkulator

Pada display yang digunakan untuk menampilkan angka yang diinput maupun angka hasil perhitungan, kita harus mengaturnya agar tampilannya mirip dengan dengan kalkulator fisik.

Berikut ini adalah code CSS untuk mengatur tampilan display kalkulator agar nampak seperti kalkulator fisik.

#display {
	display: block;
	margin: 15px auto;
	height: 42px;
	width: 174px;
	padding: 0 10px;
	border-radius: 4px;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #FFF;
	border-left: 2px solid #FFF;
	background-color: #FFF;
	box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
	font-size: 28px;
	color: #666;
	text-align: right;
	font-weight: 400;
}

Membuat Button Mirip dengan Tombol Fisik

Button atau tombol kalklator yang kita buat ada beberapa jenis. Diantaranya button digits berfungsi untuk menginputkan angka, button mathButtons merupakan button yang berfungsi untuk menginputkan operator matematika, sedangkan clearButton untuk membersihkan display.

Nah, untuk membuat tampilan yang lebih elegan maka CSS pada masing-masing kategori button kita buat berbeda. Berikut ini adalah code CSS untuk membuat tampilan tombol atau button aplikasi Kalkulator lebih mantab dan elegan.

.button {
	display: inline-block;
	margin: 2px;
	width: 42px;
	height: 42px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 4px;
}

.mathButtons {
	margin: 2px 2px 6px 2px;
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #434343;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #181818;
	border-left: 2px solid #181818;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}

.digits {
	color: #181818;
	text-shadow: 1px 1px 0px #FFF;
	background-color: #EBEBEB;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	border-radius: 4px;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}

.digits:hover,
.mathButtons:hover,
#clearButton:hover {
	background-color: #FFBA75;
	box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #AE5700;
	border-left: 2px solid #AE5700;
}

#clearButton {
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #D20000;
	border-top: 2px solid #FF8484;
	border-right: 2px solid #FF8484;
	border-bottom: 2px solid #800000;
	border-left: 2px solid #800000;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
}

Demikianlah cara membuat kalkulator dengan html yang sangat mudah. Untuk lebih memahami cara membuatnya anda dapat menyimaknya pada video tutorial berikut ini.

Artikel Cara Membuat Kalkulator dengan HTML dan CSS pertama kali tampil pada Farazinux.

Membuat Login Page Keren – Glow in The Dark

iPunx — Thu, 12 May 2022 09:25:44 +0000

Membuat login page keren dengan menggunakan teknologi HTML dan CSS. Pada tutorial kali ini kita akan membahas cara membuat login page yang keren. Anda dapat memanfaatkan desain login page ini untuk login page mikrotik, aplikasi php, aplikasi berbasis angular, atau login page berbasis aplikasi online lainnya.

Karena dibuat dengan menggunakan html dan css, maka login page ini sangat mudah untuk diimplementasikan ke dalam bahasa pemrograman lainnya. Login page ini akan lebih fleksibel untuk digunakan di berbagai platform.

Jika anda ingin mempelajari proses pembuatan desain login page berbasis html dan css ini silahkan simak video atau baca tutorial langkah-langkahnya. Namun, apabila anda ingin cepat mendapatkan sourcecode nya silahkan langsung saja didownload gratis.

Dengan login page yang keren, sudah tentu akan membuat user lebih tertarik dan nyaman menggunakannya. Tampilan Login page yang akan kita buat adalah glow in the dark. Tentunya sangat keren. Tampilannya dapat dilihat di bawah ini.

Pada tombol submit, terdapat animasi keren. Selain animasi yang keren, saat mouse didekatkan pada tombol submit, maka tombol akan menyala. Sehingga tampak button glow in the dark.

Berikut ini adalah langkah-langkah membuat login page keren glow in the dark.

Pertama, Siapkan File index.html

File html adalah file yang dapat dengan mudah dibaca oleh browser. Pada file index.html ini kita ketikkan sourcecode sebagai berikut:




    
    
    
    
    Login Glow in the Dark


    
        Login Keren
        
          
            
            Username
          
          
            
            Password
          
          
            
            
            
            
            Submit

Pada source code html di atas, kita membuat login box yang di dalamnya ada inputan user dan password. Sedangkan tombol submit kita buat dengan menggunakan tag .

Kedua – Siapkan File style.css

Berikut ini akan kami jelaskan sourcecode Style.css, sehingga anda memahami sourcecode login page keren berbasis html dan css ini. Anda dapat mengimplementasikannya pada aplikasi anda baik yang menggunakan php, nodejs, angular atau bahasa pemrograman lainnya.

Mengatur body dengan css

Pada body kita akan mengatur margin, padding, jenis huruf dan warna background. Pada login page ini kita menggunkaan background degradasi dengan pola linear. Untuk sourcecodenya silahkan lihat di bawah ini.

body {
    margin:0;
    padding:0;
    font-family: sans-serif;
    background: linear-gradient(#141e30, #243b55);
  }

Pada desain login box, kita atur sedemikian rupa, sehingga login box memiliki tampilan yang menarik. Kali ini kita fokuskan tampilan login box glow in the dark. Pada model gelap seperti ini yang lagi tren, selain nyaman di mata, juga sepertinya akan lebih menghemat sumber daya batre.

Karena dengan mode gelap seperti ini, maka layar monitor akan mengurangi konsumsi daya listriknya. Apalagi bila diakses dengan menggunakan layar berbasis amoled.

Nah, untuk mengatur login box mode gelap ini silahkan copas sourcecode berikut ini.

.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
  }
  
  .login-box h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
  }
  
  .login-box .user-box {
    position: relative;
  }
  
  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }
  .login-box .user-box label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
  }
  
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
  }
  
  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #03e9f4;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 40px;
    letter-spacing: 4px
  }

Efek Glowing dengan CSS

Pada tombol atau button di atas ketika mouse didekatkan maka akan terjadi efek glowing. Sehingga akan nampak tombol memiliki efek bersinar dalam kegelapan.

Efek glow in the dark alias bersinar di kegelapan itu kita buat dengan code CSS. Silahkan anda copas code berikut untuk membuat efek bersinar.

.login-box a:hover {
    background: #03e9f4;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 100px #03e9f4;
  }
  
  .login-box a span {
    position: absolute;
    display: block;
  }
  
  .login-box a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #03e9f4);
    animation: btn-anim1 1s linear infinite;
  }

Script Animasi CSS

Efek yang sudah kita buat di atas rasanya masih kurang sedap tanpa animasi. Oleh karena itu, kita membutuhkan beberapa baris script lagi untuk menambahkan efek animasi.

Agar lebih tampil keren, login page yang sudah kita buat perlu ditambahkan efek animasi. Silahkan copas efek animasi CSS berikut ini.

@keyframes btn-anim1 {
    0% {
      left: -100%;
    }
    50%,100% {
      left: 100%;
    }
  }
  
  .login-box a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
  }
  
  @keyframes btn-anim2 {
    0% {
      top: -100%;
    }
    50%,100% {
      top: 100%;
    }
  }
  
  .login-box a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #03e9f4);
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
  }
  
  @keyframes btn-anim3 {
    0% {
      right: -100%;
    }
    50%,100% {
      right: 100%;
    }
  }
  
  .login-box a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #03e9f4);
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
  }
  
  @keyframes btn-anim4 {
    0% {
      bottom: -100%;
    }
    50%,100% {
      bottom: 100%;
    }
  }

Video Tutorial

Agar anda dapat lebih memahami cara membuat login page yang keren. Login page mikrotik, login page aplikasi php, login page javascript, login page angular js, login page nodejs, pokoknya yang berbasis web, dapat menggunakan script html dan css.

Silahkan unduh sourcecode berikut, apabila ada password, silahkan simak pada deskripsi video youtube di atas. Untuk mengunduh sourcecode login page glow in the dark silahkan klik pada tautan berikut ini.

Artikel Membuat Login Page Keren – Glow in The Dark pertama kali tampil pada Farazinux.

SourceCode Text Animation dengan HTML dan CSS

AIsyah Farhana — Sat, 07 May 2022 14:14:42 +0000

Sourcecode text animation berikut sangat mudah untuk dipelajari dan dimodifikasi. Anda dapat membuatnya kembali sesuai dengan tutorial tertulis mapun tutorial video di bawah.

Selain itu, anda juga dapat mendownload sourcecode text animation pada link yang sudah tersedia. Sourcecode dapat dengan mudah dimodifikasi dengan text editor kesayangan anda.

Anda dapat memanfaatkan text editor seperti Visual Studio Code, SublimeText, Notepad++, Atom atau editor keren lainnya. untuk membuat text animation seperti ini.

Walaupun text animation ini simpel, tetapi cukup menarik untuk dijadikan bahan belajar CSS dan HTML. Sehingga dengan simple nya sourcecode berikut, akan membuat kita lebih bersemangat dalam coding aplikasi.

Dasar-dasar html dan CSS yang digunakan untuk membuat text animasi seperti ini mudah dimengerti. Anda dapat dengan mudah mempelajari text animasi dengan html dan css.

Langkah-langkah untuk membuat text animasi dengan html adalah sebagai berikut:

Pertama – Siapkan Folder dan File HTML & CSS

Seperti biasa kita siapkan folder dan file index.html serta style.css terlebih dahulu. Sehingga nampak seperti gambar di bawah ini.

Kedua – Ketikkan Kode berikut pada File index.html

Untuk membuat file html berikut sebaiknya gunakan text editor kesayangan. Karena dengan text editor yang memiliki banyak fitur, tentunya akan lebih mempercepat dan mempermudah codingan.

Sourcecode untuk file index.html sangat sederhana, silahkan perhatikan code berikut:




    
    
    
    Salam With Animation Effects
    


    Salam...

Ketiga – Ketikkan Sourcecode CSS

Nah, pada file style.css yang sudah kita buat, butuh beberapa pengaturan atau code CSS seperti pada penjelasan berikut ini.

Mengimport Font Google

Agar dapat memiliki font yang sesuai, sudah barang tentu kita ambil font. Cara mengambil font yang saat ini paling mudah adalah dengan memanfaatkan google font.

Untuk mengambil google font pada CSS silahkan perhatikan contoh code berikut ini.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@700&display=swap');

Pengaturan Global HTML

Pada pengaturan margin, padding dan jenis font dapat diatur dengan code seperti di bawah ini.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

Mengatur Body HTML

Mengatur body html secara flex agar html ketika diload atau dibaca di berbagai macam browser dan perangkat komputer, tablet maupun HP akan menyesuaikan.

Selain itu, kita juga akan mengatur background pada body HTML. Semua settingan berikut adalah contoh, jadi anda tetap dapat mengkreasikan sendiri bentuk, warna dan jenis yang lebih anda sukai.

Sourcecode pengaturan body dengan CSS adalah sebagai berikut:

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #392525;
}

Setting Tampilan H2

Text yang akan kita berikan aninasi terletak pada tag H2, jadi kita akan mengatur komponen H2 seperti pada code berikut ini.

h2{
    position: relative;
    font-size: 14vw;
    color: #4b0101;
    -webkit-text-stroke: 0.3vw #fcf005;
    text-transform: uppercase;
}

Ukuran font, posisi dan warna kita atur pada CSS ini. Selain itu, huruf yang kita animasikan juga kita setel menjadi semuanya menjadi huruf kapital/ huruf besar.

Kalau anda tidak menginginkan merubah menjadi huruf besar, tinggal jadikan code text-transform menjadi comment atau hapus saja.

Efek H2 sebelum Animasi

Selanjutnya kita perlu memberikan pra efek animasi pada tag H2. Lebih jelasnya silahkan lihat pada sourcecode berikut ini.

h2::before{
    content:attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    color: #03e37b;
    -webkit-text-stroke: 0vw #fcf005;
    border-right: 2px solid #03e37b;
    overflow: hidden;
    animation: animate 6s linear infinite;
}

Efek Animasi Tulisan

Nah, langkah terakhir adalah CSS kita atur untuk menjalankan animasi. Sourcecodenya adalah sebagai berikut.

@keyframes animate{
    0%,10%,100%{
        width: 0;
    }
    70%,90%{
        width: 100%;
    }
}

Video Tutorial Membuat Animasi Tulisan

Agar anda lebih mudah mempelajari langkah-langkah membuat animasi tulisan dengan HTML dan CSS. Berikut ini kami sertakan video tutorial. Pada deskripsi video tutorial juga kami semetkan password sourcecodenya.

Silahkan disimak dengan seksama langkah-langkah pembuatan animasi text berikut.

Download SourceCode Text Animation

Jika anda ingin langsung memodifikasi file yang sudah ada, silahkan unduh sourcecode berikut ini. Akan tetapi, lebih baik anda mengikuti langkah demi langkah pembuatan text animasi agar lebih faham dan mengerti penggunaan HTML dan CSS untuk membuat animasi text.

Demikianlah cara dan sourcecode text animation, semoga dapat mempermudah pemahaman kita betapa mudah dan indahnya HTML dan CSS.

Artikel SourceCode Text Animation dengan HTML dan CSS pertama kali tampil pada Farazinux.

Membuat Navbar Keren dengan HTML dan CSS

iPunx — Fri, 06 May 2022 23:40:07 +0000

Membuat navbar keren tidak begitu sulit. Hanya dengan html dan css kita sudah dapat membuat navbar yang keren tanpa harus menggunakan plugin.

Untuk membuatnya ikuti langkah-langkah sebagai berikut:

Pertama – Siapkan Folder dan File

Langkah pertama, buatlah folder penampung, gambar logo, file html dan css. Logo usahakan berjenis svg atau png yang tidak memiliki background.

Selanjutnya logo dimasukkan ke dalam folder image. Sedangkan file index.html dan style.css silahkan dibuat dalam folder navbar. Sehingga terbuat struktur file semacam ini.

Kedua – Buatlah Coding di index.html

Selanjutnya buatlah coding pada file index.html. File index.html adalah file yang akan kita buka pada browser. Dengan file ini kita buat struktur html yang akan kita tampilkan pada web browser.

Untuk mempercepat codingan sebaiknya gunakan text editor terbaik anda. Seperti Visual Studio Code, SublimeText, Notepad++, Atom atau editor keren lainnya.

Untuk membuat navbar yang cantik, kita harus mengatur kode html di atas dengan code CSS. Akan kita jabarkan sebagai berikut.

Ketiga – Membuat File CSS

Mengimport Google Font

Agar kita dapat menggunakan font yang bagus, kita dapat mengambil font dari google. Silahkan perhatikan code berikut untuk mengambil font Montserrat dari google.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

Mengatur Background

Untuk mengatur background pada navbar pada browser, gunakan css berikut ini.

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #0522b5;
}

Mengatur tag li, a dan button

Untuk mengatur jenis, warna dan ukuran font pada tag li, a dan button silahkan buat codingan seperti ini.

li, a, button{
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}

Pengaturan Header

Kita akan mengatur header dengan metode flex. Jadi ini adalah rahasia di mana navbar yang kita buat akan semakin keren. Untuk pengaturannya di sini saya buat dua jenis, yang saya jadikan comment bisa dirubah jadi aktif dengan code di atasnya.

header{
    display: flex;
    justify-content: space-between;
    /* justify-content: flex-end; */
    align-items: center;
    padding: 30px 10%;
}

Pada pengaturan justify-content space-between akan menyebar navbar kanan maupun kiri. Sedangkan apabila kita mengaktifkan flex-end, maka navbar akan cenderung di sebelah kanan.

Posisi Logo

Pengaturan posisi logo dapat dilihat pada codingan berikut ini.

.logo{
    cursor: pointer;
    margin-right: auto;
}

Mengatur Interaksi NavLink

Navlink harus diatur sedemikian rupa agar ketika ada interaksi terjadi efek-efek yang keren. Selain itu navlink yang sudah kita buat juga harus kita atur agar berjajar seperti yang kita inginkan.

Untuk mengatur navlink seperti pada gambar di atas, mari kita lihat code-code berikut ini.

.nav__links{
    list-style: none;
}

.nav__links li{
    display: inline-block;
    padding: 0px 20px;
}

.nav__links li a{
    transition: all 0.3s ease 0s;
}

.nav__links li a:hover{
    color: #0088a9;
}

Interaksi Button

Selain komponen navlink, kita juga telah membuat satu buah button, untuk mengatur button yang telah kita buat di html, berikut ini adalah contoh codingan untuk mengatur tombol (button) dengan css.

button{
    padding: 9px 25px;
    background-color: rgba(0,136,169,1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover{
    background-color: rgba(0,136,169,0.8);
}

Anda dapat merubah sesuai dengan keinginan anda. Karena di atas adalah code html dan css yang bisa dengan sangat mudah kita pahami dan kita modifikasi.

Untuk lebih memperjelas tutorial kali ini, silahkan disimak pada video berikut ini.

Video Tutorial Membuat Navbar HTML dan CSS

Untuk lebih mempermudah pemahaman kita terhadap codingan membuat navbar dan CSS, silahkan disimak baik-baik video berikut ini. Pada video juga kami sertakan link sourcecode dan password file akan kami tampilkan di dalam video. Jadi simak baik-baik videonya untuk mendapatkan password file tersebut.

Download Source Code Navbar HTML dan CSS

Untuk mengunduh file sourcecode Navbar HTML dan CSS silahkan click pada tautan berikut ini.

Selamat mencoba membuat navbar yang keren dengan hanya menggunakan HTML dan CSS.

Artikel Membuat Navbar Keren dengan HTML dan CSS pertama kali tampil pada Farazinux.

css Arsip - Farazinux

Sourcecode New Year Countdown | HTML, CSS, JS

1. Tampilan Hitung Mundur New Year

Preview Countdown Happy New Year

HTML

New Year Countdown

CSS

JavaScript (JS)

2. Sourcecode Hitung Mundur New Year

Preview

HTML

CSS

Javascript (JS)

Source Code StopWatch dengan HTML, CSS dan Javascript

Persiapan Coding Stopwatch HTML

Copy Paste Source Code STOPWATCH

1. HTML

Stopwatch

2. CSS

3. Javascript

Source Code Game Matematika dengan HTML, CSS dan Javascript

Source Code Game

1. HTML

Game Matematika untuk Anak-Anak

2. CSS

3. JavaScript

Disclaimer

Source Code Game Tic Tac Toe Google

1. HTML

Tic Tac Toe

2. CSS

3. JAVASCRIPT

Neon Icon Glowing dengan HTML dan CSS

Buat File index.html

Coding Style.css

Mengatur Body html

Pengaturan Container

CSS icon

Video Tutorial dan Link Download

Cara Membuat Kalkulator dengan HTML dan CSS

Mencoba Aplikasi Kalkulator HTML CSS

Pertama, Membuat File index.html

Karce

Kedua, Membuat File style.css

Mengatur Body HTML

CSS untuk div Container

Mempercantik Skin Kalkulator

Mengatur Display Inputan Kalkulator

Membuat Button Mirip dengan Tombol Fisik

Membuat Login Page Keren – Glow in The Dark

Pertama, Siapkan File index.html

Login Keren

Kedua – Siapkan File style.css

Mengatur body dengan css

Pengaturan Login-box

Efek Glowing dengan CSS

Script Animasi CSS

Video Tutorial

Download Source Code Login Page Glow in The Dark

SourceCode Text Animation dengan HTML dan CSS

Pertama – Siapkan Folder dan File HTML & CSS

Kedua – Ketikkan Kode berikut pada File index.html

Salam...

Ketiga – Ketikkan Sourcecode CSS

Mengimport Font Google

Pengaturan Global HTML

Mengatur Body HTML

Setting Tampilan H2

Efek H2 sebelum Animasi

Efek Animasi Tulisan

Video Tutorial Membuat Animasi Tulisan

Download SourceCode Text Animation

Membuat Navbar Keren dengan HTML dan CSS

Pertama – Siapkan Folder dan File

Kedua – Buatlah Coding di index.html

Ketiga – Membuat File CSS

Mengimport Google Font

Mengatur Background

Mengatur tag li, a dan button

Pengaturan Header