pemrograman 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.

Rumus Terbilang Javascript HTML

iPunx — Wed, 26 Oct 2022 05:53:46 +0000

Rumus terbilang sangat kita butuhkan untuk membuat aplikasi yang berkaitan dengan penulisan nominal angka atau uang. Untuk aplikasi berbasis spreadsheet excel, rumus terbilang dapat anda unduh pada tautan berikut ini.

Sedangkan pada kesempatan kali ini, kita akan membagikan rumus atau script terbilang dengan menggunakan bahasa pemrograman. Bahasa pemrograman yang kita gunakan javascript dan html, dengan tambahan pemanis css.

Apabila anda menemui kesulitan untuk memahami script di bawah ini, penulis nanti akan membuatkan video tutorialnya. Penulis akan menjelaskan script terbilang javascript html ini dengan singkat dan semoga mudah dipahami.

Langkah-langkah untuk membuat rumus terbilang dengan javascript dan html adalah sebagai berikut.

Pertama, Membuat Template HTML

Langkah pertama yang kita buat adalah membuat folder untuk menampung script yang kita buat. Misalnya kita akan membuat folder dengan nama terbilang.

Kemudian kita buat file html dengan nama index.html. File html ini berisi script untuk mendesain form aplikasi terbilang. Script html aplikasi terbilang adalah sebagai berikut:



    
        
        
        
        
        
        
        terbilang
    
    
        
            
                
                    
                        Terbilang
                    
                    
                        Angka yang dimasukkan tidak boleh lebih dari 3 digit 
                        

                        
                        
                    
                      
                        Terbilang:

Dari code html di atas, kita memanggil css dari bootstrap dan dari css yang kita buat sendiri. CSS yang kita buat sendiri hanya untuk mengatur background dengan file style.css.

Untuk aplikasi javascriptnya kita taruh terpisah pada file script.js. Pada file tersebut script untuk menampilkan terbilang kita buat dengan bahasa pemrograman javascript.

Kedua, Membuat File Style.css

File style.css berfungsi untuk mengatur tampilan aplikasi. Sebagai contoh sederhana berikut ini adalah pengaturan background dengan CSS.

Walaupun sederhana, anda dapat memodifikasinya sesuai keinginan agar lebih menarik. CSS atau Cascading Style Sheet adalah file yang berfungsi untuk mengatur dan mempercantik tampilan html.

Berikut adalah script CSS untuk mengatur tampilan aplikasi terbilang yang kita buat.

html {
    height: 100%;
}
body {
    margin:0;
    padding:0;
    font-family: sans-serif;
    background: linear-gradient(#85f81a, #243b55);
}

CSS di atas mengatur tinggi html 100% alias menggunakan seluruh layar. Font-family atau font yang digunakan untuk menampilkan aplikasi.

Sedangkan background kita buat dengan linear-gradient atau gradasi warna. Anda dapat mengubah warna gradasi sesuai dengan selera.

Ketiga, Membuat Script.js Aplikasi Terbilang

File script.js berfungsi untuk menjalankan aplikasi terbilang. Script aplikasi terbilang adalah sebagai berikut:

    function angka(e) {
    if (!/^[0-9]+$/.test(e.value)) {
      e.value = e.value.substring(0,e.value.length-1);
    }
    }
    var units = [' '];
    var angka = ["", "satu", "dua", "tiga", "empat", "lima", "enam", "tujuh", "delapan", "sembilan"];
    var digit3 = function(feed) {
  
    var output = '';
  
    if (feed.length % 3 > 0) {
        feed = '00'.substr(0, (3 - feed.length % 3)) + feed;
        //1234 akan diubah menjadi 001234
    }

	var segment3 = feed.split('.'); 
    $.each(segment3, function(i, v){
  	var digit = v.split('');
    if(digit[0] == '1'){
    	output += 'seratus ';
    }else if(digit[0] != '0'){
   		output += angka[digit[0]] + ' ratus ';  	
    }
    if(digit[1] == '1'){
    	if(digit[2] == '0'){
          output += 'sepuluh ';
      }else if (digit[2] == '1'){
          output += 'sebelas ';
      } else {
      	output += angka[digit[2]]+ 'belas '; 
      }          
    }else if(digit[1] != '0'){
    	output += angka[digit[1]] +' puluh ' + angka[digit[2]]+' ';
    }else{
    	if(digit[0] == '0' && digit[1]=='0' && digit[2]=='1'){
      	output += 'se';
      }else{
      	output += angka[digit[2]]+ ' ';
      }
    }
    output += units[segment3.length-i-1]+' ';
    })
    return output;
    }


$(document).on('click','#converter', function(){
    var feed = $('#number').val();
	if(isNaN(feed)){
  	alert('Yang anda tulis bukan bilangan')
    return false;
  } else if (!/^[0-9]+$/.test(feed)) {
  	alert('Tidak boleh menggunakan symbol')
    return false;
  } else if (Number(feed) > 999) {
      alert('Nominal yang anda masukkan lebih dari ratusan')
      return false;
  }
  
  var digits =  
  $('#output').html(digit3(feed))
})

Agar lebih mudah, anda bisa langsung copy paste script di atas. Anda dapat menerapkannya pada aplikasi berbasis php juga.

Demikianlah rumus terbilang javascript yang kita bagikan kali ini. Apabila menemui kesulitan, silahkan tulis pada kolom komentar.

Artikel Rumus Terbilang Javascript HTML 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.

Daftar Text Editor Terbaik untuk Programmer

iPunx — Fri, 06 May 2022 07:25:39 +0000

Daftar Text Editor – Bagi programmer pasti sangat membutuhkan text editor. Berbagai pilihan text editor saat ini menyuguhkan berbagai keunggulan.

Puluhan text editor dengan berbagai fitur hadir baik secara gratis maupun berbayar. Beberapa text editor tersedia dalam berbagai versi sistem operasi.

Text editor programming saat ini tidak hanya memiliki fitur IDE (Integrated Development Environment) untuk satu bahasa pemrograman saja. Akan tetapi, banyak text editor yang telah dilengkapi dengan IDE dalam berbagai bahasa pemrograman.

Apa itu Text Editor?

Sebelum kita membahas text editor apa saja yang terbaik untuk programmer. Perlu juga kita ketahui apa itu text editor.

Pada umumnya text editor adalah sebuah perangkat lunak atau disebut juga dengan software yang memiliki fungsi untuk memberikan kemudahan bagi para programmer saat menuliskan kode-kode pemrograman.

Berbagai bahasa pemrograman seperti C, C++, Java, JavaScript, Php, Fortran, Cobol, dapat ditangani dengan bantuan text editor. Menulis code aplikasi akan lebih mudah dengan bantuan text editor yang dilengkapi dengan IDE.

Yang Perlu Diperhatikan dalam Memilih Text Editor

Untuk memilih text editor yang paling cocok dengan kita sebagai programmer. Ada beberapa hal yang perlu diperhatikan untuk menentukan text editor yang paling baik.

Gratis atau Berbayar

Saat ini kebanyakan text editor bisa digunakan secara gratis. Walaupun gratis, text editor seperti Visual Studio Code, Vim, Notepad++ telah memberikan fitur yang sangat luar biasa.

Bagi programmer pemula sudah sangat mencukupi untuk hanya menggunakan text editor gratis. Namun, apabila anda adalah programmer profesional tidak ada salahnya untuk menggunakan versi pro atau berbayar.

Fitur yang Ditawarkan

Hal yang tidak kalah pentingnya adalah fitur dari text editor yang ditawarkan. Tentunya setiap software memiliki kelebihan dan kekurangan masing-masing.

Karena ada kemungkinan dengan berbagai fitur yang melimpah, tetapi justru malah membuat software text editor tersebut terasa berat dijalankan.

Tetapi, juga ada text editor yang memiliki fitur minimalis tetapi tetap produktif karena lebih cepat dan ringan dijalankan di perangkat komputer anda.

Perhatikan untuk Bahasa Pemrograman apa

Selanjutnya faktor bahasa pemrograman yang akan anda gunakan. Misalnya ketika kita akan tekun dengan projek dengan bahasa pemrograman C#, maka text editor yang cocok untuk membantu pekerjaan kita adalah aplikasi text editor berbasis Visual Studio.

Spesifikasi Komputer

Kelancaran pekerjaan pemrograman selain text editor yang digunakan adalah spesifikasi komputer yang digunakan. Kemampuan komputer yang mampu untuk text editor perlu dipertimbangkan.

RAM, kapasitas penyimpanan dan sistem operasi yang telah kamu gunakan pada komputermu jga harus diperhatikan untuk memilih text editor yang tepat.

Daftar Text Editor Terbaik

Berikut ini adalah daftar text editor terbaik versi penulis:

Visual Studio Code

Pilihan pertama jatuh pada Visual Studio Code yang memiliki tampilan modern dan banyaknya fitur yang disajikan.

Walaupun aplikasi Visual Studio Code dikembangkan oleh raksasa software Microsoft yang terkenal dengan perusahaan berbayar. Tetapi, saat ini VS Code diberikan oleh Microsoft secara cuma-cuma alias gratis.

Walaupun Microsoft memberikan VS Code secara gratis, tetapi fitur yang diberikan tidak kaleng-kaleng. VS Code bagi penulis memiliki fitur di atas text editor pemgrograman yang lain.

Visual Studio Code juga dapat terintegrasi langsung dengan GitHub. Fitur ini sangat powerfull bagi programmer. Karena dengan mudah akan langsung dapat menyingkronkan codingannya dengan Github.

Pilihan untuk mengkustomisasi tampilan editornya juga sangat beragam. Plugin yang dapat dimanfaatkan untuk mempermudah coding juga berlimpah.

Dengan berbagai fitur dan terbilang gratis ini, penulis menempatkan Visual Studio Code sebagai Text Editor terbaik dan terfavorit saat ini (2022).

Untuk mengunduhnya dapat dapat mengunjungi langsung pada website resminya di https://code.visualstudio.com/

SublimeText

Text editor ranking dua terbaik jatuh pada Sublime Text. Dengan fitur yang melimpah dan desain visual yang elegan dan keren. Theme yang ditawarkan pada Sublime Text sangat keren, bahkan penulis ketika menggunakan VS Code pun masih menginstall theme atau tema Sublime Text.

Sublime Text juga sangat ringan, namun penuh dengan fitur. Teks Editor ini dapat berjalan di berbagai platform mulai dari Windows, macOS dan Linux.

Untuk penggunaan awal bisa mencoba dengan versi trial. Namun, apabila ingin merasa lebih, dapat berlangganan sekitar $ 70 untuk mendapatkan lisensi penuh.

Untuk mencoba menggunakan SublimeText silahkan unduh di https://www.sublimetext.com/

Notepad++

Pengguna Windows pasti tidak asing dengan aplikasi Notepad. Sebuah aplikasi bawaan Windows yang bisa digunakan sebagai teks editor.

Namun, apabila ingin coding dengan lebih nyaman, bertabur fitur canggih, maka lebih baik menggunakan Notepad++. Walaupun tampilannya sederhana layaknya Notepad, tetapi Notepad++ memiliki banyak fitur canggih.

Link downloadnya di https://notepad-plus-plus.org/downloads/

Selain ringan, Notepad++ menyuguhkan beragam fitur menarik seperti text shortening, shortcut customization, macro recording, dan lainnya. Rasanya cukup lah Notepad++ sebagai pilihan terbaik untuk programmer pemula.

Atom

Atom merupakan text editor yang dikembangkan oleh GitHub. Akan tetapi Microsoft secara resmi mengakuisisi Atom pada tahun 2018.

Untuk mengunduhnya silahkan kunjungi website atom di https://atom.io/

Dengan atom programmer dapat saling berkolaborasi bersama-sama mengerjakan suatu project. Jadi Atom ini IDE yang sangat keren kan.

Emacs

Emacs pertama kali dirilis dan dikembangkan pada tahun 1976. Keunggulan dari emacs adalah file manager yang ada didalamnya dapat digunakan juga untuk menjalankan games, yaitu games tetris.

Vim

Pengguna Sistem Operasi Linux pasti sangat mengenal text editor ini. Pada versi terminal Linux bernama Vi sedang versi desktopnya bernama Vim.

Vim dapat menangani berbagai macam bahasa pemrograman. Selain itu Vim juga tersedia di berbagai sistem operasi mulai dari Linux, Windows maupun macOS.

Geany

Geany sering menjadi aplikasi text editor bawaan untuk Linux. Fitur unggulan Geany antara lain, syntax highlighting, code folding, code navigation, autocompletion programming, dan lain sebagainya.

Geany dibangun di atas GTK+ runtime, jadi untuk menjalankannya tidak terlalu dibutuhkan resource yang besar.

Netbeans

Bagi programmer Java saya yakin tidak akan lupa dengan IDE ini. Netbeans sangat powerfull jika digunakan untuk mendevelop aplikasi berbasis Java.

Namun, ternyata Netbeans IDE tidak hanya dapat menjadi IDE Java. Akan tetapi dapat pula dijadikan IDE JavaScript, C / C++, HTML maupun Php. Walau IDE ini memang cukup berat dijalankan.

Untuk mengunduh netbeans silahkan kunjungi https://netbeans.apache.org/download/index.html

AIDE

Jika anda adalah programmer yang hanya memiliki HP atau Tablet Android, maka AIDE adalah text editor pilihan terbaik. Karena AIDE berjalan lancar pada sistem Android.

AIDE dapat diunduh langsung di PlayStore. Karena AIDE berjalan di Android, sudah barang tentu AIDE sangat baik untuk membantu coding aplikasi berbasis Android.

Kesimpulan

Semestinya, masih banyak lagi text editor yang lainnya. Namun, 10 ini merupakan text editor yang penulis rasa paling populer dan paling powerfull.

Pilihan ada di tangan anda, pakai sesuai dengan kebutuhan dan spesifikasi yang tepat pada perangkat yang anda gunakan.

Dari daftar text editor di atas, manakah yang jadi paling favorit? Silahkan tulis pada kolom komentar.

Artikel Daftar Text Editor Terbaik untuk Programmer pertama kali tampil pada Farazinux.

10 Programmer Paling Dicari Mobil Listrik Tesla

iPunx — Sun, 17 Apr 2022 15:10:49 +0000

Programmer (programmer komputer) adalah orang yang ahli membuat aplikasi komputer. Komputer di sini dapat diartikan sebagai komputer server, desktop, laptop mapun HP.

Tetapi, karena banyaknya bahasa pemrograman, tentunya tidak mungkin seorang programmer menguasai seluruh bahasa pemrograman. Tentunya, seorang programmer pasti akan lebih berkonsenterasi pada satu atau beberapa saja bahasa pemrograman.

Seiring dengan berkembangnya teknologi otomotif. Apalagi Tesla sebagai pionir mobil listrik canggih. Tentunya tesla membutuhkan skill programmer untuk melengkapi kecanggihan mobil buatannya.

Paling tidak, ada 10 bahasa skill bahasa pemrograman yang dicari oleh Ellon Mask. Tesla membutuhkan programmer dengan skill bahasa pemrograman tertentu untuk teknologi mobilnya.

Nah, berikut ini adalah basa skill bahasa pemrograman yang dibutuhkan oleh Tesla, diantaranya:

1. Python

Phyton merupakan bahasa pemrograman yang mudah dipelajari. Karena sintaks coding bahasa pemrograman ini sangat simple dan mudah diingat. Ya, layaknya bahasa inggris biasa dalam kehidupan sehari-hari lah.

Tetapi jangan salah, dibalik kesederhanaannya itu, ternyata Python merupakan bahasa pemrograman yang sangat mantab. Banyak teknologi kecerdasan buatan yang dibangun dengan bahasa pemrograman ini.

2. Java

Java merupakan bahasa pemrograman yang sangat mantabs. Bahasa pemrograman ini dapat berjalan di perangkat raksasa sampai dengan microcontroller.

Walaupun tidak sesederhana Python, tetapi Java merupakan bahasa pemrograman yang sangat populer. Bahkan dulu pernah sempat menjadi bahasa pemrograman paling populer lho.

3. JavaScript

Jangan disamakan ya, antara JavaScript dan Jawa. Walaupun namanya mirip, bahkan seperti turunannya. Tetapi, dua bahasa pemrograman ini berbeda.

JavaScript sering digunakan untuk membangun aplikasi web berbasis serverside. Jadi load di browser pengguna seperti lebih terkesan enteng.

4. C#

Bahasa pemrograman C# selain sudah senior, juga banyak dokumentasinya. Sehingga, ketika mempelajari bahasa pemrograman ini sudah banyak referensinya.

5. SQL

SQL adalah bahasa interaksi dengan database. Sehingga SQL menjadi standar untuk komunikasi dengan database.

6. Ruby

Ruby adalah bahasa pemrograman berorientasi objek (PBO). Bahasa pemrgoraman ini populer di kalangan developer web.

7. TypeScript

Merupakan turunan dari JavaScript. TypeScript sangat mantab digunakan karena ringan dan cepat.

8. CSS

CSS adalah bahasa yang digunakan untuk memodifikasi komponen HTML. Sehingga tampilan aplikasi berbasis web dapat lebih cantik dan menarik.

9. Php

Sudah sangat populer dan bahkan tidak seorangpun programmer yang tidak kenal dengan Php. Bahasa pemrograman ini lebih sering digunakan untuk mendevelop web.

Beberapa framework populer juga berdasar pada bahasa pemrograman ini. Laravel dan CodeIgniter merupakan dua framework besar yang menggunakan bahasa Php.

10. React

Bahasa ini lebih sering digunakan untuk interaksi dengan user interface. Jadi dengan react ini lebih mempercepat kinerja programmer dalam menghubungkan logic aplikasi dengan UI aplikasi.

Itulah beberapa bahasa pemrograman yang lagi dicari Tesla. Siapkan diri anda menjadi bagian dari boomingnya perkembangan teknologi.

Mari kita tingkatkan skill kita. Bawa diri kita menjadi bagian dari berkembangnya teknologi.

Artikel 10 Programmer Paling Dicari Mobil Listrik Tesla pertama kali tampil pada Farazinux.

Pengenalan Scatch untuk Melatih Pola Pikir Anak dengan Bahasa Pemrograman

iPunx — Tue, 07 Dec 2021 08:21:06 +0000

Pengertian Scratch

Scratch adalah sebuah bahasa pemrograman visual untuk lingkungan pembelajaran yang memungkinkan pemula (entah murid, guru, pelajar, atau orangtua) untuk belajar membuat program tanpa harus memikirkan salah-benar penulisan sintaksis (sumber : id.wikipedia.org).

Scratch menyediakan visualisasi dengan berbagai macam bahasa, termasuk salah satunya adalah bahasa Indonesia. Sehingga, scratch sangat cocok digunakan untuk melatih pola pikir bahasa pemrograman baik untuk dewasa maupun anak-anak.

Bagaimana kita mendapatkan aplikasi Scratch?

Aplikasi Scratch dapat kita operasikan secara offline mapun secara online. Secara offline, kita harus mendownload dan menginstall aplikasi Scratch di perangkat laptop/ komputer kita. Software tersedia di berbagai macam platform, baik Windows, OS X, Linux, ChromeOS mapun Android. Aplikasi Scratch dapat diunduh gratis di web https://scratch.mit.edu/download.

Sedangkan apabila ingin menggunakan aplikasi Scratch secara online pengguna dapat mengakses dengan browser di alamat https://scratch.mit.edu.

Artikel Pengenalan Scatch untuk Melatih Pola Pikir Anak dengan Bahasa Pemrograman pertama kali tampil pada Farazinux.