Genta Mas Bali
Blog
Kami membagikan "Blog" Semoga Bermanfaat
Halo Sobat Genta Mas Bali, Kita bahas kali ini Ide Bisnis Dunia Digital 2024 Yang Cocok.
Di tahun 2024, peluang bisnis digital terus berkembang seiring dengan perkembangan teknologi dan perubahan kebutuhan konsumen. Berikut beberapa ide bisnis digital yang dapat menjadi potensi:
Platform Edukasi Online: Dengan semakin banyaknya orang yang mencari pembelajaran online, menciptakan platform edukasi digital yang menawarkan kursus-kursus tentang berbagai topik bisa menjadi peluang bisnis yang menjanjikan.
Layanan Konsultasi Virtual: Banyak orang mencari saran dan konsultasi dalam berbagai bidang, mulai dari kesehatan mental hingga keuangan. Membangun platform yang menghubungkan konsultan dengan klien secara virtual bisa menjadi ide bisnis yang menarik.
Pengembangan Aplikasi Kesehatan dan Kesejahteraan: Dengan meningkatnya kesadaran akan kesehatan dan kesejahteraan, pengembangan aplikasi yang membantu orang untuk memantau dan meningkatkan kesehatan mereka bisa menjadi peluang bisnis yang menjanjikan.
Layanan Pengiriman Barang Otomatis: Dengan kemajuan teknologi drone dan robotika, layanan pengiriman barang otomatis bisa menjadi bisnis yang sangat efisien dan inovatif.
Platform Pembagian Konten: Dengan semakin banyaknya pencipta konten di berbagai platform, menciptakan platform yang membantu para pencipta konten untuk mendistribusikan dan mengelola konten mereka bisa menjadi ide bisnis yang menjanjikan.
Pengembangan Aplikasi Berbasis Kecerdasan Buatan (AI): AI semakin meresap ke berbagai aspek kehidupan sehari-hari. Membangun aplikasi yang memanfaatkan kecerdasan buatan untuk meningkatkan efisiensi dan kenyamanan pengguna bisa menjadi ide bisnis yang menarik.
Layanan Keuangan Digital: Dengan perubahan tren pembayaran dan perbankan menuju digital, ada peluang untuk menciptakan layanan keuangan digital yang inovatif, seperti aplikasi pembayaran, manajemen keuangan pribadi, dan lain sebagainya.
Platform Hiburan Digital: Dengan semakin banyaknya orang yang mencari hiburan online, menciptakan platform hiburan digital seperti streaming musik, film, atau game bisa menjadi ide bisnis yang menjanjikan.
Pengembangan Aplikasi Berbasis Realitas Virtual (VR) dan Realitas Augmentasi (AR): Teknologi VR dan AR semakin populer di berbagai industri, termasuk gaming, pendidikan, dan periklanan. Membangun aplikasi yang memanfaatkan teknologi ini untuk menciptakan pengalaman yang menarik bisa menjadi peluang bisnis yang menjanjikan.
Layanan Berbasis Lingkungan: Dengan meningkatnya kesadaran akan isu-isu lingkungan, layanan atau produk yang berfokus pada keberlanjutan dan ramah lingkungan bisa menjadi peluang bisnis yang menjanjikan. Misalnya, aplikasi untuk mendukung gaya hidup berkelanjutan atau platform untuk memfasilitasi perdagangan barang-barang ramah lingkungan.
Namun, sebelum memulai bisnis digital, penting untuk melakukan riset pasar yang cermat dan mengidentifikasi kebutuhan yang belum terpenuhi di pasar. Selain itu, mempertimbangkan aspek legal, keuangan, dan pemasaran juga krusial untuk kesuksesan bisnis digital Anda.
Genta Mas
Welcome back, with me the founder of Genta Mas Bali. You will learn together on the Genta Mas Bali blog how to create a Responsive Weather API Free In HTML. So this Responsive Weather Application, will be able to display the weather according to each city just by typing the name of the city in the available column then you press the enter button then the weather in that city will automatically appear.
The word "Weather In"
3. Very Responsive on all screen sizes
- City name
- Day/night view
- Weather in Celsius
- State of the city (Rain, storm, snow, sunny, etc.)
- Highest temperature
- Lowest temperature
- Weather icons (Rain, storm, snow, sunny, etc.)
- Average temperature
- Humidity
To make this program [Responsive Weather App In HTML]. First you need to create four Files, one HTML File and one CSS File and lastly two JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Responsive Weather App In HTML from the given download button.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!DOCTYPE html>Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;700&display=swap');
body {
font-family: 'Raleway', sans-serif;
background: #316278;
color: #707070;
margin: 0;
padding: 0;
}
/* === Weather in Styling === */
.search {
display: flex;
justify-content: center;
align-items: center;
}
.title {
color: #fff;
font-weight: 700;
font-size: 70px;
}
/* === Card Styling === */
.container {
max-width: 500px;
min-width: 500px;
}
.form-rounded {
border-radius: 2em;
}
.back-card {
border-radius: 40px !important;
}
/* === Card Top Styling === */
.city-name {
position: absolute;
width: 100%;
}
.city-name p {
font-size: 30px;
font-weight: 400;
}
.city-name span {
font-weight: 400;
font-size: 45px;
font-family: 'Times New Roman', Times, serif;
position: relative;
top: -60px;
}
/* === Card Mid Styling === */
.temp span {
font-weight: 100;
font-size: 5em;
letter-spacing: -5px;
white-space: nowrap;
}
.card-mid {
line-height: 0.5;
}
.condition {
line-height: 1em;
font-weight: 700;
font-size: 1em;
text-transform: capitalize;
}
.high::before {
content: '';
background: url('img/up.svg') no-repeat;
width: 10px;
height: 15px;
display: inline-block;
position: relative;
top: 3px;
}
.low::before {
content: '';
background: url('img/down.svg') no-repeat;
width: 10px;
height: 15px;
display: inline-block;
position: relative;
top: 3px;
}
.icon-container {
border-radius: 100%;
width: 100px;
height: 100px;
background: #202020;
}
.icon-container img {
background-position: center;
}
/* === Card Bottom Styling === */
.card-bottom {
line-height: 0.5;
}
.card-bottom span {
font-size: 12px;
font-weight: 700;
}
.card-bottom p {
font-size: 50px;
font-weight: 100;
letter-spacing: -2px;
}
/* === Responsive Media Screen === */
@media screen and (max-width: 400px) {
.search {
flex-direction: column;
}
.title {
font-size: 30px;
}
.container {
max-width: 300px;
min-width: 300px;
}
.back-card {
border-radius: 25px !important;
}
.city-name p {
font-size: 20px;
}
.city-name span {
font-size: 30px;
top: -45px;
}
.temp span {
font-size: 60px;
}
.condition {
font-size: 12px;
}
.icon-container {
width: 70px;
height: 70px;
}
.icon-container img {
background-position: center;
}
.card-bottom p {
font-size: 30px;
}
.card-bottom span {
font-size: 10px;
}
}
Third, create a JS file with the name index.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.// === Get All Element === //
const searchForm = document.querySelector('.search-loaction');
const cityValue = document.querySelector('.search-loaction input');
const cityName = document.querySelector('.city-name p');
const cardBody = document.querySelector('.card-body');
const timeImage = document.querySelector('.card-top img');
const cardInfo = document.querySelector('.back-card');
// === Change Kelvin to Celcius === //
const spitOutCelcius = (kelvin) => {
celcius = Math.round(kelvin - 273.15);
return celcius;
}
const isDayTime = (icon) => {
if (icon.includes('d')) {
return true
} else {
return false
}
}
// === Update Element HTML === //
updateWeatherApp = (city) => {
console.log(city);
const imageName = city.weather[0].icon;
const iconSrc = `http://openweathermap.org/img/wn/${imageName}@2x.png`
cityName.textContent = city.name;
cardBody.innerHTML = `
<div class="card-mid row">
<div class="col-8 text-center temp">
<span>${spitOutCelcius(city.main.temp)}°C</span>
</div>
<div class="col-4 condition-temp">
<p class="condition">${city.weather[0].description}</p>
<p class="high">${spitOutCelcius(city.main.temp_max)}°C</p>
<p class="low">${spitOutCelcius(city.main.temp_min)}°C</p>
</div>
</div>
<div class="icon-container card shadow mx-auto">
<img src="${iconSrc}" alt="" />
</div>
<div class="card-bottom px-5 py-4 row">
<div class="col text-center">
<p>${spitOutCelcius(city.main.feels_like)}°C</p>
<span>Feels Like</span>
</div>
<div class="col text-center">
<p>${city.main.humidity}%</p>
<span>Humidity</span>
</div>
</div>
`;
// === Change Img Day & Night === //
if (isDayTime(imageName)) {
console.log('day');
timeImage.setAttribute('src', 'img/day_image.svg');
if (cityName.classList.contains('text-white')) {
cityName.classList.remove('text-white');
} else {
cityName.classList.add('text-black');
}
} else {
console.log('night');
timeImage.setAttribute('src', 'img/night_image.svg');
if (cityName.classList.contains('text-black')) {
cityName.classList.remove('text-black');
} else {
cityName.classList.add('text-white');
}
}
cardInfo.classList.remove('d-none');
}
// === Add an event listner to the Form === //
searchForm.addEventListener('submit', e => {
e.preventDefault();
const citySearched = cityValue.value.trim();
console.log(citySearched);
searchForm.reset();
requestCity(citySearched)
.then((data) => {
updateWeatherApp(data);
});
.catch((error) => {
console.log(error)
})
});
Finally, create a JS file with the name request.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.
As a note for the script part
const key = '?';
You have to create an account on the web OpenWeather to get your own API key.
const requestCity = async (city) => {
const baseURL = 'http://api.openweathermap.org/data/2.5/weather'
const query = `?q=${city}&appid=${key}`;
//make fetch call (promise call)
const response = await fetch(baseURL + query);
//promise data
const data = await response.json();
return data;
}
That's it, now you have successfully created a Responsive Weather App, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
https://www.mediafire.com/file/wyo6pz4b7md437o/weather-app-in-html-hitoricoding.zip/file
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Genta Mas
Hello everyone, I am the founder of Genta Mas Bali. Today in Syiainfoku you will learn how to create a Simple Calculator With Vanilla JavaScript, Html And CSS. Simple Calculator is also a JavaScript Mini Project, and very useful to train you, if you are just starting to learn JS. And many people suggest you to practice creating some Mini Projects JS so that you understand JS better.
In my Simple Calculator design, there will be several elements in it which you can also customize to your liking.
To make this program [Simple Calculator with Vanilla JavaScript]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Simple Calculator from the given download button.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
Note: Here I use JS in my HTML file, because the required JS code is quite simple and short, so I input it directly into the HTML file without using external JS
<!DOCTYPE html>Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swa...;
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000723;
}
.calculator {
position: relative;
display: grid;
}
.calculator .value {
border-radius: 5px;
grid-column: span 4;
height: 100px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 18px;
font-weight: 600;
}
.calculator span {
border-radius: 5px;
cursor: pointer;
display: grid;
width: 75px;
height: 75px;
color: #000;
background: #bfd3d9;
place-items: center;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.calculator span:active {
background: #54e31a;
color: #fff;
}
.calculator span.clear {
grid-column: span 2;
width: 150px;
background: #f26691;
}
.calculator span.plus {
grid-row: span 2;
height: 150px;
}
.calculator span.equal {
background: #1eb7cc;
}
https://www.mediafire.com/file/78jxzxnhxv1v7c1/simple-calculator-hitoricoding.zip/file
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Genta Mas
Welcome back, with me the founder of Genta Mas Bali. You will learn together on the Genta Mas Bali blog how to How To Make Raindrops Effect with RainyDay.js, HTML And Css. Ok, let's get started.
To make this program [Raindrops Effect]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Raindrops Effect from the given download button.
Because here I use the JavaScript canvas, namely RainyDay.js, so you have to download canvas JS on the official website. You can visit the site or you can use the download link I provided here
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!DOCTYPE html>Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension. Background image can be changed according to taste.
Finally, create a JS file with the name main.js and paste the given code in your CSS file. Remember, you must create a file with a .js extension.
function rain() {
That's it, now you have successfully created a Raindrops Effect, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
https://www.mediafire.com/file/8fnbzp4k6xan4jg/raindrops-effect-hitoricoding.zip/file
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Genta Mas
Welcome back, with me the founder of Genta Mas Bali. You will learn together on the Genta Mas Bali blog how to make a Icon Heartbeat Effect no JavaScript pure HTML and CSS.
To make this program [Icon Heartbeat Effect]. First you need to create two Files, one HTML File and one CSS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Heartbeat Effect from the given download button.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!DOCTYPE html>Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #eef6ff;
}
.heart {
height: 70px;
width: 70px;
background: #ed2860;
position: relative;
transform: rotate(-45deg);
box-shadow: -10px 10px 90px #ff0048;
animation: heartKU 0.6s linear infinite;
}
@keyframes heartKU {
0% {
transform: rotate(-45deg) scale(1.07);
}
80% {
transform: rotate(-45deg) scale(1.0);
}
100% {
transform: rotate(-45deg) scale(0.8);
}
}
.heart::before {
content: '';
position: absolute;
height: 70px;
width: 70px;
background: #ed2860;
top: -50%;
border-radius: 50px;
box-shadow: -10px -10px 90px #ff0048;
}
.heart::after {
content: '';
position: absolute;
height: 70px;
width: 70px;
background: #ed2860;
right: -50%;
border-radius: 50px;
box-shadow: 10px 10px 90px #ff0048;
}
That's it, now you have successfully created a Heartbeat Effect, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
https://www.mediafire.com/file/mpzo9wsbrp42q09/heartbeat-effect-hitoricoding.zip/file
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Genta Mas
Hello everyone, I am the founder of Genta Mas Bali. Today in Genta Mas Bali you will learn how to create a Analog Clock With Vanilla JavaScript , HTML And CSS.
To make this program Analog Clock with Vanilla JavaScript]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Analog Clock from the given download button.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!DOCTYPE html>Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #08091f;
}
.clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background: url(../assets/clock.png);
background-size: cover;
border: 4px solid #0c0b2d;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.09),
inset 0 -15px 15px rgba(255, 255, 255, 0.09),
0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .minute,
.clock .second {
position: absolute;
}
.clock .hour,
.hr {
width: 160px;
height: 160px;
}
.clock .minute,
.mn {
width: 190px;
height: 190px;
}
.clock .second,
.sc {
width: 230px;
height: 230px;
}
.hr,
.mn,
.sc {
display: flex;
justify-content: center;
border-radius: 50%;
position: absolute;
}
.hr::before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #ff0053;
z-index: 10;
border-radius: 6px 6px 0 0;
}
/* ff0053 */
.mn::before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #f5f31d;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc::before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #319bd0;
z-index: 12;
border-radius: 6px 6px 0 0;
}
Finally, create a JS file with the name main.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.
That's it, now you have successfully created a Analog Clock with Vanilla JavaScript, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
https://www.mediafire.com/file/fq8gcz83dwybh1j/analog-clock-dark-ui-hitoricoding.zip/file
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Genta Mas
Hello everyone, I am the founder of Genta Mas Bali. Today in Genta Mas Bali you will learn how to create a 3 Simple Menu Hover in HTML.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3 Simple Menu Hover | hitoricoding</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
</head>
<body>
<!-- === HOVER STYLE #1 === -->
<section class="style1">
<nav class="effect1">
<a href="#"><span data-hover="Home">Home</span></a>
<a href="#"><span data-hover="Blog">Blog</span></a>
<a href="#"><span data-hover="Service">Service</span></a>
<a href="#"><span data-hover="About">About</span></a>
<a href="#"><span data-hover="Contact">Contact</span></a>
</nav>
</section>
<!-- === HOVER STYLE #2 === -->
<section class="style2">
<nav class="effect2">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Skill</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</nav>
</section>
<!-- === HOVER STYLE #3 === -->
<section class="style3">
<nav class="effect3">
<a href="#" data-hover="Home"><span>Home</span></a>
<a href="#" data-hover="Blog"><span>Blog</span></a>
<a href="#" data-hover="Service"><span>Service</span></a>
<a href="#" data-hover="About Us"><span>About Us</span></a>
<a href="#" data-hover="Contact Us"><span>Contact Us</span></a>
</nav>
</section>
</body>
</html>
Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.
That's it, now you have successfully created a 3 Simple Menu Hover in HTML, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
https://www.mediafire.com/file/ony2e0i16wpya5b/3-simple-menu-hover-hitoricoding.zip/file
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Genta Mas
SEO (Search Engine Optimization) telah menjadi tulang punggung strategi pemasaran digital di era modern. Dalam melangkah ke tahun 2023, penting bagi para pemasar digital dan pemilik bisnis untuk memahami perubahan terbaru dalam algoritma Google dan tren optimasi mesin pencari (SEO). Inilah waktu untuk menguasai SEO di era baru dan memastikan situs web Anda bersaing secara efektif di dunia daring yang semakin kompetitif.
1. Memahami Algoritma Google Terbaru
Dalam era baru ini, Google terus mengembangkan algoritmanya untuk memberikan hasil pencarian yang lebih relevan dan berkualitas. Google kini lebih fokus pada pemahaman konten, pengalaman pengguna, dan keaslian informasi. Memahami faktor-faktor ini menjadi kunci dalam mengoptimalkan situs web Anda.
2. Konten Berkualitas Tinggi dan Relevan
Google semakin memprioritaskan konten berkualitas tinggi dan relevan. Tulislah konten yang memberikan nilai tambah kepada audiens Anda. Gunakan kata kunci secara alami dan memberikan solusi konkret terhadap pertanyaan atau masalah pengguna. Google semakin memahami konteks dan niat pencarian, sehingga konten yang berkualitas akan memiliki dampak besar.
3. Pengalaman Pengguna yang Optimal
Penting untuk memastikan pengalaman pengguna di situs web Anda optimal. Hal ini mencakup kecepatan situs, responsivitas desain, dan navigasi yang mudah. Google memberikan perhatian khusus pada situs web yang memberikan pengalaman pengguna yang memuaskan, sehingga pastikan situs Anda siap untuk menyambut pengunjung dengan baik.
4. Mobile-First Indexing
Mobile-first indexing menjadi lebih penting seiring dengan meningkatnya penggunaan perangkat seluler. Pastikan situs web Anda dioptimalkan untuk tampil dengan baik di perangkat seluler. Struktur konten dan tata letak yang responsif akan memberikan nilai tambah pada peringkat SEO Anda.
5. Pemahaman Terhadap Tren SEO Masa Kini
Selain memahami algoritma Google, penting untuk selalu mengikuti tren SEO terkini. Ini melibatkan pemahaman terhadap penggunaan teknologi baru, seperti voice search, dan penyesuaian dengan perubahan perilaku pencarian pengguna. Tetap terinformasi tentang tren dan teknologi terbaru akan memberikan keunggulan kompetitif.
Penutup: Mengukir Keberhasilan di Era Baru
Dengan memahami perubahan dalam algoritma Google dan mengikuti tren SEO terkini, Anda dapat mengukir keberhasilan di era baru ini. Investasi dalam konten berkualitas, pengalaman pengguna yang optimal, dan pemahaman mendalam terhadap perubahan algoritma akan membantu situs web Anda naik peringkat dan bersaing efektif di dunia SEO yang dinamis. Ingatlah, SEO bukanlah tugas sekali jalan, melainkan perjalanan terus-menerus untuk menjaga dan meningkatkan visibilitas online Anda.
Genta Mas
Page