DEV Community: Caner Demirci

if (!var) - What does it mean exactly? Let's Explore with TypeScript

Caner Demirci — Mon, 20 Mar 2023 08:39:40 +0000

if (!variable) What does it mean exactly? I think there's no need to explain much about this. This piece of code show us enough.

const nameof = (n: any) : string => Object.keys({n})[0];

const valueOrType = (n: any) : any => {
  if (n === undefined)
    return 'undefined';

  if (n === null)
    return 'null';

  if (n === '')
    return 'empty string';
}

const isFalsy = (n: any) : boolean => !n ? true : false;
const logInputIsFalsy = (inp: any) => console.log(`[${nameof(inp)}] - value : [${valueOrType(inp)}] - is ${isFalsy(inp) ? 'falsy' : 'not falsy'}`);

logInputIsFalsy('');
logInputIsFalsy(null);
logInputIsFalsy(undefined);
logInputIsFalsy(false);
logInputIsFalsy(0);
logInputIsFalsy('word');
logInputIsFalsy(1);

Console outputs:

"[n] - value : [empty string] - is falsy"
"[n] - value : [null] - is falsy"
"[n] - value : [undefined] - is falsy"
"[n] - value : [false] - is falsy"
"[n] - value : [0] - is falsy"
"[n] - value : [word] - is not falsy"
"[n] - value : [1] - is not falsy"

Netflix-My Wish-English

Caner Demirci — Fri, 04 Nov 2022 09:50:10 +0000

I struggle with English for years. I read books, articles, news... listen, talk, watch movies, series in English. Netflix has subtitles but I want them with two seconds delay. I wrote to Netflix about this but they didn't hear me! Then I wrote this code. (Saved into browser's code snippets). I'm watching video for ten seconds without reading subtitles then code rewinds the video ten seconds and I'm listening and reading subtitles.

setInterval(function () {
    const videoCanvas = document.querySelector(
        '[data-uia="player"]'
    );

    videoCanvas.click();

    setTimeout(function () {
        const prevBtn = document.querySelector('[data-uia="control-back10"]');
        prevBtn.click();
    }, 1000);
}, 20000);

Puppeteer İle Sözlük Uygulaması

Caner Demirci — Mon, 26 Sep 2022 12:26:25 +0000

Birilerinden "rakkam" kelimesi duyuyorum bazen. Öyle bir kelime var mı ya? Bakalım TDK (Türk Dil Kurumu) sozluk.gov.tr ye. Evet öyle bir kelime yok. Rakkam değil rakam ve rakam kelimesi fiyatlardan, ücretlerden bahsederken kullanılamaz çünkü rakamlar 0 ile 9 arasındaki sayılardır. "Rakkam 1,5 milyon" diyor adam. Neyse ne gerek var bu kadar kafaya takmaya ama artık üşenmeyip her merak ettiğim kelime için sozluk.gov.tr ye bakıyorum. Derken aklıma ne geldi? Bot yazabilirim, zaten puppeteer i kullanmaya yer arıyordum.

Ve ortaya çıkan uygulama bu: (nacizane pardon naçizane. Şimdi sözlükten baktım: Zarf [Haddi olmayarak, Çok küçük, önemsiz bir şey olarak "Bunun için sizlere naçizane bir tavsiyem olacak." - Tarık Buğra)

Kaynak kod: github.com/canerdemirci/sozluk_bot

Bu uygulamada Node JS, Express, Puppeteer ve JS kullandım.

Ben örnek bir metin koydum ama ekranın sağ üst köşesinden istediğiniz metni yapıştırabilirsiniz. Kelimeler üzerinde gezip tıklarsanız kelime arama kutusuna taşınır. Enter tuşana bastığınızda arama başlar. Sonuçlar sol tarafta listelenir.

Şimdi birkaç teknik bilgi vereyim.

Önyüzden yazdığım rest api ye başvurup kelime arama sonuçlarını çekmek için basitçe fetch api kullandım.

async function getResult(word) {
    word = filterWord(word);

    const options = {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
    };

    try {
        const res = await fetch(`http://localhost:5000/word/${word}`, options);

        if (res.status == 500) {
            failed = true;
            return;
        } else if (res.status == 204) {
            noresult = true;
            return;
        } else if (res.status == 200) {
            results.push(await res.json());
            failed = false;
            noresult = false;
            return;
        }
    } catch(err) {
        failed = true;
    }
}

Tıkladığmız kelime arama kutusuna gitmeden önce filtreden geçiyor yani türkçe karakter içermeyen tüm karakterler kelimeden atılıyor.

function filterWord(word) {
    const alphabet = `abcçdefgğhıijklmnoöprsştuüvyzABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ`;
    var newWord = '';

    for (let i=0; i<word.length; i++) {
        let isAlphabet = true;

        for (let j=0; j<alphabet.length; j++) {
            if (word[i] !== alphabet[j]) {
                isAlphabet = false;
            }
            else {
                isAlphabet = true;
                break;
            }
        }

        if (isAlphabet) newWord += word[i];
    }

    return newWord;
}

Metni tıklanabilir tuşlara dönüştüren kod:

function transformTextToButtons() {
    const words = text.split(' ');

    articleSection.innerHTML = '';

    for (let i=0; i<words.length; i++) {
        const btn = document.createElement('a');
        const space = document.createElement('span');

        space.innerText = ' ';

        btn.href = '#';
        btn.innerText = words[i];

        btn.addEventListener('click', (e) => {
            e.preventDefault();

            searchBox.value = filterWord(words[i]); 
        });

        articleSection.appendChild(btn);
        articleSection.appendChild(space);
    }
}

Arama kutusunda enter tuşuna basıldıktan sonra veriler gelene kadar süren bekleme animasyonu css kodu: (1,5 saniye, doğrusal, sonsuz, 360 derece transform: rotate)

#pageBlocker img {
    animation: loadingAnim infinite 1.5s linear;
    transform-origin: center;
}

@keyframes loadingAnim {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

/word rotamız; sonuçları elde ettiğinde 200 http durum koduyla, kelime anlamı bulunamadıysa 204 koduyla, hata oluştuysa 500 koduyla json olarak dönüş yapar.

Puppeteer

Tarayıcıyı aç (headless yani gizli biz pencereyi görmeyeceğiz) sonra bir sekme referans al.

const browser = await puppeteer.launch();
const page = await browser.newPage();

Adrese git. Bekle (500 milisaniye boyunca 0'dan fazla ağ bağlantısı olmayınca navigasyon bitmiş varsayar)
Sitede arama kutusu (input '#tdk-search-btn') görene kadar bekle
Arama kutusuna kelimeyi yaz. (Burada yazmak yerine input elementinin değerini de değiştirebilirdik)
Arama tuşuna tıkla.

await page.goto('https://sozluk.gov.tr/', { waitUntil: 'networkidle0' });
await page.waitForSelector(searchBoxSelector);
await page.type(searchBoxSelector, word);
await page.click(searchButtonSelector);

Arama tuşuna tıkladıktan sonra sayfa dinamik olarak içeriğini yeniliyor. Bu yüzden biraz bekliyoruz. Kelime anlamlarının yer aldığı html elementinin de ortaya çıkmasını en fazla 3 saniye bekliyoruz eğer çıkmazsa tarayıcıyı kapatıp null değeri döndürüyoruz. Yani kelime anlamı bulanamamış oluyor.

try {
    await page.waitForNetworkIdle({idleTime: 'networkidle0'});
    await page.waitForSelector(meansSectionSelector, { timeout: 3000 });
} catch (e) {
    await browser.close();
    return null;
}

Burada da kelimenin anlamını, türlerini, örnek cümleyi ve söyleyen kişiyi alıp bir obje haline dönüştürüyoruz. Burada önemli olan $$eval(selector, function) methodu. Bu method birden fazla elementi ele alarak işlemenizi sağlıyor.

const means = await page.$$eval(meansElementsSelector, el => el.map(e => {
    const kinds = e.querySelector('i:nth-child(2)')?.innerText.split(',').map(k => k.trim());
    const mean = e?.childNodes[2]?.nodeValue ?? e?.innerText;
    const sampleSentence = e.querySelector('i:nth-child(4)')?.innerText;
    const sampleSentenceAuthor = e.querySelector('b:nth-child(5)')?.innerText;

    return {
        kinds,
        mean,
        sampleSentence,
        sampleSentenceAuthor
    };
}));

Kodun tamamını github'tan inceleyebilirsiniz. github.com/canerdemirci/sozluk_bot

Son olarak şuna değinmek istiyorum; İş hayatında, özellikle mühendislik alanında zaten bir miktar yozlaşmış dilimizi iyice kötüye götürdüğümüzü görüyorum. Biri teknik bir konudan bahsederken Türkçesini bilmediği ya da İngilizcesini daha havalı bulduğu bir kelimeyi Türkçe konuşmasının arasında İngilizce olarak kullanıyor. Map ettim, push ettim, set ettim demek yerine Türkçesini kullanmaya gayret edelim çünkü biz bu alışkanlığı çalışma arkadaşlarımıza da bulaştırıyoruz. (Geçenlerde bizim finans müdürü "Opportunity cost" demişti online toplantıda gülmemek için zor tuttum kendimi. Fırsat maliyeti desene be adam. Bu konuyuda iktisadi idari bilimler okuyan herkes bilir)

Flutter Skeleton Wireframe

Caner Demirci — Wed, 21 Sep 2022 06:28:54 +0000

You can create different types of skeletons using WireFrame widget. Here is the code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Skeleton Wireframe',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final List<User> _users;
  late final List<Post> _posts;

  bool _loading = true;

  Future<void> _loadPosts() async {
    await Future.delayed(const Duration(seconds: 3));

    setState(() {
      _loading = false;
    });
  }

  @override
  void initState() {
    _users = const [
      User(
          name: 'Dan Brown',
          photo:
              'https://upload.wikimedia.org/wikipedia/commons/5/5f/Alberto_conversi_profile_pic.jpg'),
      User(
          name: 'Leanne Graham',
          photo:
              'https://i1.wp.com/www.alphr.com/wp-content/uploads/2020/12/Facebook-How-to-Change-Profile-Picture.jpg?fit=1200%2C666&ssl=1'),
      User(
          name: 'Ervin Howell',
          photo:
              'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'),
    ];

    _posts = [
      Post(
          date: '22.03.2022',
          title: 'Lorem ipsum dolor sit amet',
          text:
              'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,',
          user: _users[0]),
      Post(
          date: '20.03.2022',
          title: 'many web sites still in their infancy',
          text:
              'and a search for lorem ipsum will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes',
          user: _users[1]),
      Post(
          date: '17.03.2022',
          title: 'Lorem Ipsum is not simply random text',
          text:
              'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,',
          user: _users[2]),
    ];

    _loadPosts();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
            children: List.generate(_posts.length, (index) {
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: _loading
                ? const PostWireFrame()
                : PostWidget(post: _posts[index]),
          );
        })),
      ),
    );
  }
}

class PostWidget extends StatelessWidget {
  final Post post;

  const PostWidget({Key? key, required this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                ClipOval(
                  clipBehavior: Clip.hardEdge,
                  child: SizedBox(
                    width: 50,
                    height: 50,
                    child: Image.network(
                      post.user.photo,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                const SizedBox(width: 15),
                Text(post.title),
              ],
            ),
            const SizedBox(height: 10),
            Text(post.text),
            const SizedBox(height: 10),
            Align(
              alignment: Alignment.centerRight,
              child: Text(post.date),
            )
          ],
        ),
      ),
    );
  }
}

class PostWireFrame extends StatelessWidget {
  const PostWireFrame({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: const [
              WireFrame(
                width: 50,
                height: 50,
                shape: BoxShape.circle,
              ),
              SizedBox(width: 15),
              Expanded(
                child: WireFrame(
                  height: 25,
                ),
              )
            ],
          ),
          const WireFrame(
            height: 100,
          ),
          const Align(
            alignment: Alignment.centerRight,
            child: WireFrame(
              width: 50,
              height: 25,
            ),
          )
        ],
      ),
    );
  }
}

class WireFrame extends StatefulWidget {
  final double? width;
  final double? height;
  final BoxShape? shape;

  const WireFrame({Key? key, this.width, this.height, this.shape})
      : super(key: key);

  @override
  State<WireFrame> createState() => _WireFrameState();
}

class _WireFrameState extends State<WireFrame>
    with SingleTickerProviderStateMixin<WireFrame> {
  late final AnimationController _controller;
  late final Animation gradientFirstColorAnim;
  late final Animation gradientSecondColorAnim;

  final gradientFirstColorTween = TweenSequence([
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[200], end: Colors.grey[600]),
        weight: 1),
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[600], end: Colors.grey[200]),
        weight: 1),
  ]);

  final gradientSecondColorTween = TweenSequence([
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[600], end: Colors.grey[200]),
        weight: 1),
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[200], end: Colors.grey[600]),
        weight: 1),
  ]);

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  void initState() {
    _controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);

    gradientFirstColorAnim = gradientFirstColorTween.animate(_controller);
    gradientSecondColorAnim = gradientSecondColorTween.animate(_controller);

    _controller.repeat();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Container(
            width: widget.width,
            height: widget.height,
            decoration: BoxDecoration(
              borderRadius: widget.shape == BoxShape.circle
                  ? null
                  : BorderRadius.circular(5),
              shape: widget.shape ?? BoxShape.rectangle,
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    gradientFirstColorAnim.value,
                    gradientSecondColorAnim.value,
                  ]),
            ),
          );
        });
  }
}

class User {
  final String name;
  final String photo;

  const User({required this.name, required this.photo});
}

class Post {
  final User user;
  final String title;
  final String text;
  final String date;

  const Post(
      {required this.user,
      required this.title,
      required this.text,
      required this.date});
}

Fetch Public Job Ads in Turkey With Puppeteer

Caner Demirci — Mon, 19 Sep 2022 13:03:33 +0000

Puppeteer is awesome for web scrapping, automation, testing. I wanted to do some practice with it. I made an app that fetchs public job ads from kamuilan.sbb.gov.tr and lists.

Let me explain some puppeteer methods:

launch: Open the browser
newPage: Creates a tab in the browser.
goto(url, { waitUntil: 'networkidle0'}): Navigate an url. (waitUntil: 'networkidle0': consider navigation to be finished when there are no more than 0 network connections for at least 500 ms).
waitforSelector: Waits for the selector to appear in page.
$(): It is like document.querySelector() it selects an element that matched selector string.
$$(): It is like document.querySelectorAll() it select all element that matched selector string.
$eval(): It selects first matches element and passes it to its function parameter then we can handle that element in this function.

Firstly, let's review the website code that we want to crawl. There is a slider and it is a ul element. Its class name is slides. And there are ads (li elements) its inside. We can grab them.

const slides = await newPage.$$('ul.slides li');

Backend

index.js

require('dotenv').config();

const PORT = process.env.PORT || 3000;

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(express.json());

app.use(express.static('public'));

app.use('/ads', require('./routes/ads'),
    (req, res) => res.status(500).send('Internal server error'));

app.listen(PORT, () => console.log(`App started on http://localhost: ${PORT}`));

routes/ads.js

We want to grab these elements.

const puppeteer = require('puppeteer');
const router = require('express').Router();

router.get('/', async (req, res, next) => {
    try {
        const browser = await puppeteer.launch();
        const newPage = await browser.newPage();

        const adsUrl = process.env.PUBLIC_ADS_URL;

        await newPage.goto(adsUrl, { waitUntil: 'networkidle0' });
        await newPage.waitForSelector('ul.slides');

        const slides = await newPage.$$('ul.slides li');

        const ads = [];

        for (s of slides) {
            const avatar = await s.$eval('.avatar img', el => el.src);
            const organasation = await s.$eval('h5 span.black', el => el.innerText);
            const title = await s.$eval('h5 span.patrol', el => el.innerText);
            const dateRange = await s.$eval('h5 span.h5date', el => el.innerText);
            const link = await s.$eval('a', el => el.href);

            ads.push({
                avatar,
                organasation,
                title,
                dateRange,
                link
            });
        }

        await browser.close();

        return res.status(200).json(ads);
    } catch {
        next();
    }
});

module.exports = router;

Results

I use thunder client vs code extension.

Frontend

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Public Ads</title>
    <style>
        a {
            text-decoration: none;
            color: #000;
        }
            a:hover {
                color: #ff0000;
            }

        #publicAdsTable {
            border-collapse: true;
            width: 90%;
        }
            #publicAdsTable th, td {
                padding: 1rem;
                border: 1px solid #ccc;
            }
    </style>
</head>
<body>
    <h1 id="loading">Loading...</h1>
    <table id="publicAdsTable">
        <thead>
            <th></th>
            <th></th>
            <th>Organasation</th>
            <th>Job Ad Title</th>
            <th>Date Range</th>
            <th>Go</th>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        const publicAdsTable = document.getElementById('publicAdsTable');
        const loadingEl = document.getElementById('loading');

        const ads = fetch('http://localhost:5000/ads')
            .then(response => {
                if (response.ok) {
                    loadingEl.style.display = 'none';

                    const tbody = publicAdsTable.querySelector('tbody');

                    response.json().then(json => json.forEach((ad, index) => tbody.innerHTML +=
                        `<tr>
                            <td>${index + 1}</td>
                            <td><img src="${ad.avatar}" alt="${ad.title}"></td>
                            <td>${ad.organasation}</td>
                            <td>${ad.title}</td>
                            <td>${ad.dateRange}</td>
                            <td><a href="${ad.link}" target="blank">Open Ad</a></td>
                        </tr>`
                    ));
                } else {
                    alertError();
                }
            })
            .catch(() => alertError());

        function alertError() {
            alert('Something went wrong! Please Try Again Later.');
        }
    </script>
</body>
</html>

Results

.env file

PORT=5000
PUBLIC_ADS_URL = 'https://kamuilan.sbb.gov.tr/'

package.json

{
  "name": "publicads",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "puppeteer": "^10.4.0"
  }
}

Tic Tac Toe Game With HTML and JS

Caner Demirci — Mon, 19 Sep 2022 07:57:03 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            background-color: #14bdac;
            width: 100%;
            height: 100%;
            padding: 1.5rem;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: .5rem;
            width: 80%;
            height: 100%;
            margin: auto;
            background-color: #70757a;
        }
            .grid > div {
                background-color: #3fecdb;
                cursor: pointer;
                font-size: 3rem;
                font-weight: bold;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                transition: all .5s;
            }
            .grid > div:hover {
                opacity: .6;
            }
            .grid > div > div {
                text-align: center;
            }
    </style>
</head>
<body>
    <div id="grid" class="grid">
    </div>

    <script>
        const grid = document.getElementById('grid');

        var won = false;
        var freezeGame = false;
        var squaresHTML = '';
        var sqId = 0;
        var moveX = true;

        const squares = [];

        for (let r=0; r<3; r++) {
            for (let c=0; c<3; c++) {
                sqId++;
                squaresHTML += `<div id="${sqId}"><div></div></div>`;
                squares.push({ id: sqId, move: null });
            }
        }

        grid.innerHTML = squaresHTML;

        const squaresEL = document.querySelectorAll('#grid > div');

        squaresEL.forEach(s => s.addEventListener(
            'click',
            () => {                
                if (!freezeGame) {
                    square = squares.find(sq => sq.id == s.id);

                    if (!square.move) {
                        moveX = !moveX;
                        square.move = moveX ? 'X' : 'O';
                        s.querySelector('div').innerText = moveX ? 'X' : 'O';
                        s.style.backgroundColor = moveX ? 'royalblue' : 'tomato';

                        checkGame();
                    }
                }
            }
        ));

        function wonGame(one, two, three, character) {
            freezeGame = true;
            won = true;
            let anim = true;

            if (one == null && two == null && three == null && character == null) {
                gameOverAnimation(anim, function() {
                    squaresEL.forEach(s => s.style.backgroundColor = anim ? 'green' : 'yellow');
                    anim = !anim;
                }, function() {
                    alert('DRAW!');
                    location.reload();
                });
                return;
            }

            gameOverAnimation(anim, function() {
                squaresEL[one].style.backgroundColor = anim ? 'green' : 'yellow';
                squaresEL[two].style.backgroundColor = anim ? 'green' : 'yellow';
                squaresEL[three].style.backgroundColor = anim ? 'green' : 'yellow';
                anim = !anim;
            },function() {
                alert(`${character} won`);
                    location.reload();
                });
        }

        function gameOverAnimation(anim, animCallback, overCallback) {
            setInterval(function() {
                animCallback();
            }, 200);
            setTimeout(function() {
                overCallback();
            }, 2000);
        }

        function checkGame() {
            // Rows
            // first row
            if (squares[0].move == 'X' && squares[1].move == 'X' && squares[2].move == 'X') {
                wonGame(0, 1, 2, 'X');
            } else if (squares[0].move == 'O' && squares[1].move == 'O' && squares[2].move == 'O') {
                wonGame(0, 1, 2, 'O');
            }
            // second row
            if (squares[3].move == 'X' && squares[4].move == 'X' && squares[5].move == 'X') {
                wonGame(3, 4, 5, 'X');
            } else if (squares[3].move == 'O' && squares[4].move == 'O' && squares[5].move == 'O') {
                wonGame(3, 4, 5, 'O');
            }
            // third row
            if (squares[6].move == 'X' && squares[7].move == 'X' && squares[8].move == 'X') {
                wonGame(6, 7, 8, 'X');
            } else if (squares[6].move == 'O' && squares[7].move == 'O' && squares[8].move == 'O') {
                wonGame(6, 7, 8, 'O');
            }

            // first column
            if (squares[0].move == 'X' && squares[3].move == 'X' && squares[6].move == 'X') {
                wonGame(0, 3, 6, 'X');
            } else if (squares[0].move == 'O' && squares[3].move == 'O' && squares[6].move == 'O') {
                wonGame(0, 3, 6, 'O');
            }
            // second column
            if (squares[1].move == 'X' && squares[4].move == 'X' && squares[7].move == 'X') {
                wonGame(1, 4, 7, 'X');
            } else if (squares[1].move == 'O' && squares[4].move == 'O' && squares[7].move == 'O') {
                wonGame(1, 4, 7, 'O');
            }
            // third column
            if (squares[2].move == 'X' && squares[5].move == 'X' && squares[8].move == 'X') {
                wonGame(2, 5, 8, 'X');
            } else if (squares[2].move == 'O' && squares[5].move == 'O' && squares[8].move == 'O') {
                wonGame(2, 5, 8, 'O');
            }

            // left cross
            if (squares[0].move == 'X' && squares[4].move == 'X' && squares[8].move == 'X') {
                wonGame(0, 4, 8, 'X');
            } else if (squares[0].move == 'O' && squares[4].move == 'O' && squares[8].move == 'O') {
                wonGame(0, 4, 8, 'O');
            }
            // right cross
            if (squares[2].move == 'X' && squares[4].move == 'X' && squares[6].move == 'X') {
                wonGame(2, 4, 6, 'X');
            } else if (squares[2].move == 'O' && squares[4].move == 'O' && squares[6].move == 'O') {
                wonGame(2, 4, 6, 'X');
            }

            const nullSquaresNum = squares.filter(s => s.move == null);

            if (nullSquaresNum.length == 0 && !won) {
                wonGame(null, null, null, null);
            }
        }
    </script>
</body>
</html>

Flutter Logo Quiz Game

Caner Demirci — Sat, 17 Sep 2022 18:22:23 +0000

I made a logo quiz game. I use an API for logos, brand names and descriptions. (brandfetch.com). Each game level is PageView widget page. In the game level, there is an icon and buttons that consist of brand name. Each correct letter gives 10 points to user and wrong letters loses 1 point. If the user changes pages the level timer stops. At the end of the level timer stops and if the user couldn't find the brand name user gets 0 point. If user finds brand name game shows brand description.

AndroidManifest.xml
Internet permission. Above the tag.

<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

pubspec.yaml

http: ^0.13.4
flutter_dotenv: ^5.0.2
flutter_svg: ^1.0.3
shared_preferences: ^2.0.13

Project Structure

main.dart
helpers.dart
constants.dart
models
- logo_format.dart
- logo.dart
- brand.dart
- game_brand.dart
services
- logo_api.dart
- shared_prefs.dart
pages
- home
  - home.dart
- game
  - game.dart
  - components
    - game_level.dart

main.dart

import 'package:flutter/material.dart';

import 'pages/home/home.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

Future<void> main() async {
  await dotenv.load(fileName: "assets/.env");

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Logo Quiz',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(title: 'Flutter Logo Quiz'),
    );
  }
}

helpers.dart

String timeFormat(int second) {
  final dur = Duration(seconds: second);

  return dur.inMinutes.remainder(60).toString().padLeft(2, '0') +
      ':' +
      dur.inSeconds.remainder(60).toString().padLeft(2, '0');
}

constants.dart

const brandDomainList = [
  'netflix.com',
  'airbnb.com',
  'github.com',
  'reddit.com',
  'slack.com',
  'wordpress.com',
  'pepsi.com',
  'starbucks.com',
  'pinterest.com',
  'walmart.com',
  'toyota.com',
  'subway.com',
  'amazon.com',
  'dominos.com',
  'playstation.com',
  'spotify.com',
  'youtube.com',
  'linkedin.com',
  'paypal.com',
  'stackoverflow.com',
];

/models/logo_format.dart

class LogoFormat {
  final String src;
  final String format;

  const LogoFormat({required this.src, required this.format});

  factory LogoFormat.fromJson(Map<String, dynamic> json) {
    return LogoFormat(
        src: json['src'] as String, format: json['format'] as String);
  }
}

/models/logo.dart

import 'logo_format.dart';

class Logo {
  final String type;
  final List<LogoFormat> formats;

  const Logo({required this.type, required this.formats});

  factory Logo.fromJson(Map<String, dynamic> json) {
    return Logo(
        type: json['type'] as String,
        formats: json['formats']
            .map<LogoFormat>((f) => LogoFormat.fromJson(f))
            .toList());
  }
}

/models/brand.dart

import 'logo.dart';

class Brand {
  final String name;
  final String description;
  final List<Logo> logos;

  const Brand(
      {required this.name, required this.description, required this.logos});

  factory Brand.fromJson(Map<String, dynamic> json) {
    return Brand(
        name: json['name'] as String,
        description: json['description'] as String,
        logos: json['logos'].map<Logo>((l) => Logo.fromJson(l)).toList());
  }
}

/models/game_brand.dart

class GameBrand {
  final String name;
  final String description;
  final String icon;
  final String logo;

  const GameBrand(
      {required this.name,
      required this.description,
      required this.icon,
      required this.logo});
}

/services/logo_api.dart

import 'dart:convert';

import 'package:http/http.dart' as http;
import '../models/brand.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

import '../models/game_brand.dart';

class LogoApi {
  static Future<GameBrand> getBrand(String brandDomain) async {
    // Get api key
    final brandtoken = dotenv.env['brandtoken'];

    final response = await http.get(
        Uri.parse('https://api.brandfetch.io/v2/brands/$brandDomain'),
        headers: {'Authorization': 'Bearer $brandtoken'});

    if (response.statusCode == 200) {
      final brand = Brand.fromJson(jsonDecode(response.body));

      final gameBrand = GameBrand(
          name: brand.name,
          description: brand.description,
          icon: brand.logos.firstWhere((l) => l.type == 'icon').formats[0].src,
          logo: brand.logos
              .firstWhere((l) => l.type == 'logo')
              .formats
              .firstWhere((f) => f.format == 'svg')
              .src);

      return gameBrand;
    } else {
      throw Exception('Failed to fetch brand');
    }
  }
}

/services/shared_prefs.dart

import 'package:shared_preferences/shared_preferences.dart';

class SharedPrefs {
  static Future<SharedPreferences> _prefs() async {
    return await SharedPreferences.getInstance();
  }

  static Future<int> getTotalScore() async {
    final sharedPreferences = await _prefs();
    return sharedPreferences.getInt('totalscore') ?? 0;
  }

  static Future<void> setTotalScore(int tscore) async {
    final sharedPreferences = await _prefs();
    await sharedPreferences.setInt('totalscore', tscore);
  }

  static Future<void> clearTotalScore() async {
    final sharedPreferences = await _prefs();
    await sharedPreferences.setInt('totalscore', 0);
  }
}

/pages/home/home.dart

import 'package:flutter/material.dart';
import 'package:logo_quiz/constants.dart';
import 'package:logo_quiz/pages/game/game.dart';
import 'package:logo_quiz/services/logo_api.dart';
import '../../models/game_brand.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<GameBrand> _brands = <GameBrand>[];

  // for show loading indicator
  bool _fetchingBrands = false;
  // for show error
  bool _fetchingBrandsError = false;

  /*
  ** Get brands from api and turn them GameBrand
  ** object and store them _brands list
  */
  Future<void> _initBrands() async {
    setState(() {
      _fetchingBrands = true;
    });

    for (var b in brandDomainList) {
      try {
        final brand = await LogoApi.getBrand(b);
        _brands.add(brand);
      } catch (ex) {
        setState(() {
          _fetchingBrandsError = true;
          _fetchingBrands = false;
        });

        return;
      }
    }

    setState(() {
      _fetchingBrandsError = false;
      _fetchingBrands = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Flutter Logo Quiz',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 36,
              ),
            ),
            const SizedBox(height: 25),
            ElevatedButton(
              child: _fetchingBrands
                  ? const Text('Loading...')
                  : _fetchingBrandsError
                      ? const Text('Error')
                      : const Text('Start'),
              onPressed: () async {
                // Send brands list to game page
                if (!_fetchingBrands) {
                  await _initBrands();

                  if (!_fetchingBrandsError) {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) {
                      return Game(brands: _brands);
                    }));
                  }
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

/pages/game/game.dart

import 'package:flutter/material.dart';

import '../../models/game_brand.dart';
import '../../services/shared_prefs.dart';
import 'components/game_level.dart';

class Game extends StatefulWidget {
  final List<GameBrand> brands;

  const Game({Key? key, required this.brands}) : super(key: key);

  @override
  State<Game> createState() => _GameState();
}

class _GameState extends State<Game> {
  int _currentLevel = 0;

  @override
  void initState() {
    super.initState();

    SharedPrefs.clearTotalScore();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildLevels(),
    );
  }

  /*
  ** Builds game pages and send them
  ** brand, level number and current level number
  ** For stop timer in level page game controls
  ** the page number equal to current page number
  */
  Widget _buildLevels() {
    return SafeArea(
      child: PageView.builder(
        onPageChanged: (pageIndex) {
          setState(() {
            _currentLevel = pageIndex;
          });
        },
        itemCount: widget.brands.length,
        itemBuilder: (BuildContext context, int index) {
          return GameLevel(
              gameBrand: widget.brands[index],
              levelNumber: index,
              currentLevel: _currentLevel);
        },
      ),
    );
  }
}

/game/components/game_level.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:logo_quiz/helpers.dart';
import 'package:logo_quiz/models/game_brand.dart';
import 'dart:math' as math;
import 'package:flutter_svg/flutter_svg.dart';
import 'package:logo_quiz/services/shared_prefs.dart';

class GameLevel extends StatefulWidget {
  final GameBrand gameBrand;
  final int levelNumber;
  final int currentLevel;

  const GameLevel(
      {Key? key,
      required this.gameBrand,
      required this.levelNumber,
      required this.currentLevel})
      : super(key: key);

  @override
  State<GameLevel> createState() => _GameLevelState();
}

class _GameLevelState extends State<GameLevel>
    with AutomaticKeepAliveClientMixin {
  final List<String> _selectedLetters = [];
  final ValueNotifier<int> _seconds = ValueNotifier<int>(300);
  final ValueNotifier<int> _score = ValueNotifier<int>(0);

  late final Timer _timer;

  bool _levelComplete = false;
  bool? _success;
  bool _isLevelStarted = false;
  int _letterOrder = 0;
  int _totalScore = 0;
  double _iconFlipValue = 0;
  double _descriptionOpacity = 1.0;
  String _iconOrLogo = 'icon';
  List<String> _shuffledBrandNameCharList = [];

  @override
  bool get wantKeepAlive => true;

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  void initState() {
    // Shuffle brand name characters for game buttons
    _shuffledBrandNameCharList = widget.gameBrand.name.characters.toList();
    _shuffledBrandNameCharList.shuffle();

    for (int i = 0; i < _shuffledBrandNameCharList.length; i++) {
      _selectedLetters.add('_');
    }

    _timer = Timer.periodic(
      const Duration(milliseconds: 1000),
      (timer) {
        if (_isLevelStarted &&
            widget.currentLevel == widget.levelNumber &&
            !_levelComplete) {
          _seconds.value--;

          if (_seconds.value <= 0) {
            setState(() {
              _score.value = 0;
              _levelComplete = true;
              _success = false;
              _iconFlipValue = 1;
              _descriptionOpacity = 0.0;
              _printTotalScore();
            });
          }
        }
      },
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return Column(
      children: [
        const Spacer(),
        // Level number, complete indicator, time
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _levelNumber(),
            _levelCompleteIndicator(),
            _levelScore(),
            if (_levelComplete) _levelTotalScore(),
            _levelTime(),
          ],
        ),
        const Spacer(),
        // Icon
        _levelIcon(),
        const Spacer(),
        // Brand letters or description
        AnimatedOpacity(
            onEnd: () {
              setState(() {
                _descriptionOpacity = 1.0;
              });
            },
            duration: const Duration(milliseconds: 500),
            opacity: _descriptionOpacity,
            child: _brandNameOrDescription()),
        const Spacer(),
        // Brand name buttons
        if (!_levelComplete) _brandNameButtons(),
        const Spacer(),
      ],
    );
  }

  Widget _levelCompleteIndicator() {
    return Icon(Icons.verified,
        color: _levelComplete && _success == false
            ? Colors.red
            : _levelComplete && _success == true
                ? Colors.green
                : Colors.grey,
        size: 60);
  }

  Widget _levelNumber() {
    return Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.black12, width: 3),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withOpacity(.3),
                blurRadius: 10,
                offset: const Offset(0, 0))
          ],
          gradient: const LinearGradient(
              colors: [Colors.blue, Color.fromARGB(255, 8, 114, 201)],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter),
        ),
        child: Text('${widget.levelNumber + 1}',
            style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.white)));
  }

  Widget _levelTime() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.black12, width: 3),
        boxShadow: [
          BoxShadow(
              color: Colors.black.withOpacity(.3),
              blurRadius: 10,
              offset: const Offset(0, 0))
        ],
        gradient: const LinearGradient(
            colors: [Colors.blue, Color.fromARGB(255, 8, 114, 201)],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ValueListenableBuilder(
            valueListenable: _seconds,
            builder: (context, value, child) {
              return Text(timeFormat(_seconds.value),
                  style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white));
            }),
      ),
    );
  }

  Widget _levelScore() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.black12, width: 3),
        boxShadow: [
          BoxShadow(
              color: Colors.black.withOpacity(.3),
              blurRadius: 10,
              offset: const Offset(0, 0))
        ],
        gradient: const LinearGradient(
            colors: [Colors.orange, Colors.deepOrange],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ValueListenableBuilder(
            valueListenable: _score,
            builder: (context, value, child) {
              return Text(_score.value.toString(),
                  style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white));
            }),
      ),
    );
  }

  Widget _levelTotalScore() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.black12, width: 3),
        boxShadow: [
          BoxShadow(
              color: Colors.black.withOpacity(.3),
              blurRadius: 10,
              offset: const Offset(0, 0))
        ],
        gradient: const LinearGradient(
            colors: [Colors.red, Colors.brown],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ValueListenableBuilder(
            valueListenable: _score,
            builder: (context, value, child) {
              return Text(_totalScore.toString(),
                  style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white));
            }),
      ),
    );
  }

  Widget _levelIcon() {
    return AnimatedContainer(
      onEnd: () {
        setState(() {
          _iconOrLogo = 'logo';
          _iconFlipValue = 2;
        });
      },
      duration: const Duration(milliseconds: 1000),
      transform: Matrix4.rotationY(_iconFlipValue * math.pi),
      transformAlignment: Alignment.center,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(color: Colors.black12, width: 175, height: 175),
          Container(color: Colors.white, width: 150, height: 150),
          SizedBox(
            width: 125,
            height: 125,
            child: _iconOrLogo == 'icon'
                ? Image.network(
                    widget.gameBrand.icon,
                    fit: BoxFit.contain,
                    cacheWidth: 100,
                    cacheHeight: 100,
                    loadingBuilder: (BuildContext context, Widget child,
                        ImageChunkEvent? loadingProgress) {
                      if (loadingProgress == null) {
                        return child;
                      }
                      return Center(
                        child: CircularProgressIndicator(
                          value: loadingProgress.expectedTotalBytes != null
                              ? loadingProgress.cumulativeBytesLoaded /
                                  loadingProgress.expectedTotalBytes!
                              : null,
                        ),
                      );
                    },
                    errorBuilder: (context, error, stackTrace) =>
                        const Icon(Icons.error),
                  )
                : SvgPicture.network(
                    widget.gameBrand.logo,
                    fit: BoxFit.contain,
                    placeholderBuilder: (context) {
                      return const CircularProgressIndicator();
                    },
                  ),
          ),
        ],
      ),
    );
  }

  Widget _brandNameOrDescription() {
    return _levelComplete
        ? Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(children: [
              Text(
                widget.gameBrand.name,
                textAlign: TextAlign.center,
                style:
                    const TextStyle(fontWeight: FontWeight.bold, fontSize: 28),
              ),
              const SizedBox(
                height: 5,
              ),
              Text(
                widget.gameBrand.description,
                textAlign: TextAlign.center,
                style: const TextStyle(fontSize: 18),
              ),
            ]),
          )
        : Padding(
            padding: const EdgeInsets.all(8),
            child: Wrap(
              alignment: WrapAlignment.center,
              spacing: 5,
              runSpacing: 5,
              children: _selectedLetters
                  .asMap()
                  .entries
                  .map<Widget>((e) => ElevatedButton(
                      onPressed: () {},
                      child: Text(e.value),
                      style: ElevatedButton.styleFrom(
                          primary: _levelComplete
                              ? Colors.green
                              : _letterOrder == e.key
                                  ? Colors.red
                                  : Colors.blue)))
                  .toList(),
            ),
          );
  }

  Widget _brandNameButtons() {
    List<Widget> wrapChildren = _shuffledBrandNameCharList
        .map<Widget>((c) => ElevatedButton(
            style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
                primary: Colors.blueGrey,
                textStyle: const TextStyle(fontSize: 18)),
            onPressed: () {
              setState(() {
                if (!_isLevelStarted) {
                  _isLevelStarted = true;
                }

                if (widget.gameBrand.name[_letterOrder] == c) {
                  _selectedLetters[_letterOrder] = c;
                  _letterOrder++;
                  _score.value += 10;

                  if (_letterOrder == widget.gameBrand.name.length) {
                    _levelComplete = true;
                    _success = true;
                    _iconFlipValue = 1;
                    _descriptionOpacity = 0.0;
                    _printTotalScore();
                  }
                } else {
                  _score.value -= 1;
                }
              });
            },
            child: Text(c)))
        .toList();

    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Wrap(
          alignment: WrapAlignment.center,
          spacing: 5,
          runSpacing: 5,
          children: wrapChildren),
    );
  }

  Future<void> _printTotalScore() async {
    int tscore = await SharedPrefs.getTotalScore();
    tscore += _score.value;
    await SharedPrefs.setTotalScore(tscore);

    setState(() {
      _totalScore = tscore;
    });
  }
}

360 Degree View - HTML5 and JS

Caner Demirci — Sat, 17 Sep 2022 09:06:49 +0000

I tried to make 360 degree view. Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360 Degree View</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        img {
            width: 100%;
        }

        .container {
            width: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="carContainer" class="container">
    </div>

    <script>
        const carContainer = document.getElementById('carContainer');
        // Car 360 degree view consists 24 images.
        const IMAGE_COUNT = 24;
        const images = [];
        // Mousedown
        var hold = false;
        // Mouse X position relative to the container div
        var posX = 0;

        createImages();
        fillContainerWithImages();

        // Create 24 images and push to images array
        // All the images except one should be invisible
        function createImages() {
            for (let i=0; i<IMAGE_COUNT; i++) {
                const img = document.createElement('img');
                img.src = `img/${i + 1}.webp`;
                img.alt = '';
                img.draggable = false;

                if (i > 0)
                    img.style.display = 'none';

                images.push(img);
            }
        }        

        function fillContainerWithImages() {
            images.forEach(i => carContainer.appendChild(i));
        }

        carContainer.addEventListener('mousedown', function(event) {
            hold = true;
        });

        carContainer.addEventListener('mouseup', function(event) {
            hold = false;
        });

        carContainer.addEventListener('mousemove', function(event) {
            if (hold) {
                // Mouse x position on container
                posX = Math.abs(
                       (document.body.clientWidth - carContainer.getBoundingClientRect().width)
                       / 2 - event.clientX);
                // Container width / 24
                const piece = carContainer.getBoundingClientRect().width / IMAGE_COUNT;
                // Make invisible all images
                images.forEach(i => i.style.display = 'none');
                // Make visible one image
                images[Math.floor(posX / piece)].style.display = 'block';
            }
        });
    </script>
</body>
</html>

Sadghuru quotes from my puppeteer api

Caner Demirci — Thu, 15 Sep 2022 13:16:01 +0000

I have made a simple web app that finds and shows and enabling you to print a random Sadghuru quote from goodreads.com with Node.js, Express, Puppeteer and Vue.js. App includes some basic CSS animations also print-friendly. I don't know very well Sadghuru but I see he is a wise person. I love to read his quotes.

Here is my server (Index.js) (Packages: dotenv, cors, express, puppeteer)

require('dotenv').config();

// in .env file (PORT=5000)
const PORT = process.env.PORT || 3000;

const express = require('express');
const cors = require('cors');
const puppeteer = require('puppeteer');

const app = express();

app.use(cors());
app.use(express.json());

app.get('/', async (req, res) => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    const rndPage = Math.floor(Math.random() * 26) + 1;
    await page.goto(`https://www.goodreads.com/author/quotes/30378.Sadhguru?page=${rndPage}`);

    const quotes = await page.$$('.quoteText');
    const rndQuote = Math.floor(Math.random() * (quotes.length - 1)) + 1;
    const quote = await quotes.find((el, index) => index === rndQuote).evaluate(el => el.innerText);

    await browser.close();

    return res.json({ quote });
});

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

const browser = await puppeteer.launch();
Try this launch({ headless: false }); and browser will show.

There are 26 pages for Sadghuru quotes. page parameter can be random 1 to 26. goodreads.com/author/quotes/30378.Sadhguru?..{rndPage}

// Get all quote div elements.
const quotes = await page.$$('.quoteText');
// Random number 1-26
const rndQuote = Math.floor(Math.random() * (quotes.length - 1)) + 1;
// Find a random quote from all quotes in the random page then grab text in the div.
const quote = await quotes.find((el, index) => index === rndQuote).evaluate(el => el.innerText);

Then we close puppeteer browser. (await browser.close()) Then we send the quote as json. (res.json({quote}))

And Frontend

App.vue

<template>
  <div id="app">
    <h1 class="header-text">Sadghuru Quotes</h1>
    <QuoteCard :quote="quote" :loadingAnim="loading" @onclick="findQuote()" />
    <button @click="printQuote()" id="printBtn"><span class="material-icons">print</span></button>
  </div>
</template>

<script>
import axios from 'axios';
import QuoteCard from './components/QuoteCard.vue';

export default {
  name: 'App',
  components: {
    QuoteCard
  },
  data() {
    return {
      quote: null,
      loading: true,
    }
  },
  mounted() {
    this.fetchQuote();
  },
  methods: {
    async fetchQuote() {
      this.loading = true;
      const result = await axios.get('http://localhost:5000/');
      this.quote = result.data.quote;
      this.loading = false;
    },
    findQuote: function() {
      if (!this.loading) this.fetchQuote();
    },
    printQuote() {
      window.print();
    }
  }
}
</script>

<style>
.header-text {
  text-align: center;
  margin: 2rem 0 2rem 0;
}

#printBtn {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  outline: none;
  border: 0;
  padding: 1rem;
  border-radius: 50%;
  cursor: pointer;
}

#printBtn:hover {
  animation-name: printbtnanim;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#printBtn span {
  font-size: 48px;
}

@keyframes printbtnanim {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@media print {
  html, body { color: #000; }

  #printBtn {
    display: none;
  }

  .header-text {
    display: none;
  }
}
</style>

QuoteCard.vue

<template>
    <div class="quotecard" :class="{'quotecard-anim': loadingAnim, 'fadein-anim': !loadingAnim }" @click="onClick()">
      <p>{{loadingAnim ? 'Loading...' : quote}}</p>
    </div>
</template>

<script>
export default {
    name: 'QuoteCard',
    props: {
        quote: String,
        loadingAnim: Boolean
    },
    methods: {
        onClick() {
            this.$emit('onclick');
        }
    }
}
</script>

<style scoped>
.quotecard {
  cursor: pointer;
  width: 70vw;
  max-height: 50vh;
  overflow: auto;
  padding: 2rem;
  margin: 4rem auto 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 55px 1px rgba(0, 250, 250, 0.3);
  transition: all .5s;
  text-align: center;
  font-size: 1.4rem;
}

.quotecard:hover {
  box-shadow: 0 0 55px 1px rgba(0, 250, 250, 0.8);
}

.quotecard-anim {
  animation-name: quotecardanim;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.fadein-anim {
    animation-name: fadeinanim;
    animation-duration: 2s;
}

@keyframes quotecardanim {
  0% {
    box-shadow: 0 0 55px 1px rgba(0, 250, 250, .1);
  }
  50% {
    box-shadow: 0 0 55px 1px rgba(0, 250, 250, 1);
  }
  100% {
    box-shadow: 0 0 55px 1px rgba(0, 250, 250, .1);
  }
}

@keyframes fadeinanim {
    from { opacity: 0; }
    to { opacity: 1; }
}

::-webkit-scrollbar{
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb{
background: #ADFFFF;
border-radius: 15px;
}
::-webkit-scrollbar-thumb:hover{
background: #D4D4D4;
}
::-webkit-scrollbar-track{
background: #F0F0F0;
border-radius: 0px;
box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}

@media print {
    .quotecard {
        box-shadow: none;
        width: 100%;
        max-height: none;
        padding: 1cm;
        margin: 0;
        border: 3px dashed #000;
        border-radius: 0;
    }

    .quotecard::after {
      content: 'Sad Ghuru';
      display: block;
      margin-top: 1cm;
      text-align: right;
      font-weight: bold;
    }
}
</style>

style.css

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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'Architects Daughter', cursive;
    background: rgb(41, 41, 41) linear-gradient(rgb(41, 41, 41), rgb(0, 0, 0)) no-repeat top left;
    background-size: cover;
    color: #fff;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

h1 {
    font-family: 'Architects Daughter', cursive;
}

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Excel to Html Table

Caner Demirci — Thu, 15 Sep 2022 13:01:05 +0000

We print tickets for fabrics to be cut in our workplace. Such as customer name, fabric code, meters, company to be delivered columns that exists in the ticket. We have an excel work file and we copy these pieces of information and we paste it to an excel page that is simply designed and has titles and borders then we print it. I coded a web page to take the output of the ticket.

There are small things too except those like bots that I wrote with use my software knowledge.

When I think about how possible to transfer cells from excel to HTML table I pasted rows that I've copied from excel to the notepad then I saw that the cells separating from each other by \t character. So If I firstly fill an array with the text that I pasted to the textarea element according to \n characters in javascript then I would have got all rows and if I put column array into row array I would have uploaded the excel data to a two-dimensional array so I do whatever I want from now on. Holey!

Here is the piece of code that does it.

function excelToArray(text) {
    let data = [];
    const tab = '\\t';
    const yenisatir = '\\n';

    text.split(yenisatir).forEach(s => data.push(s.split(tab)));

    return data;
}

Thanks to js split function we easily partition the string.

Now I'm leaving the codes of the page here. You can try copying cells from an excel page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel'den HTML Tablosuna</title>
    <style>
        @import url('<https://fonts.googleapis.com/css2?family=Roboto&display=swap>');

        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
        }

        #pasteBtn {
            outline: none;
            background: royalblue;
            padding: 1rem;
            font-weight: bold;
            font-size: 2rem;
            color: #fff;
            cursor: pointer;
            display: block;
            width: 100vw;
            height: 100vh;
            border: 0;
        }

        table {
            border-collapse: collapse;
            margin: 1rem;
        }

        td {
            padding: .5rem;
            border: 1px solid #fff;
        }

        tr:nth-child(odd) td {
            background: lightblue;
        }

        tr:hover td {
            background: lightcoral;
        }
    </style>
</head>
<body>
    <textarea></textarea>    
    <table></table>
    <button id="pasteBtn">YAPIŞTIRMAK İÇİN TIKLA</button>

    <script>
        const tableEL = document.querySelector('table');
        const textareaEL = document.querySelector('textarea');
        const pasteBtn = document.querySelector('#pasteBtn');

        initElements();

        pasteBtn.addEventListener('click', async () => {
            pasteBtn.style.display = 'none';
            textareaEL.value = await navigator.clipboard.readText();
            tableEL.innerHTML = excelToTable(textareaEL.value);
            tableEL.style.display = 'block';
        });

        function initElements() {
            tableEL.style.display = 'none';
            textareaEL.style.display = 'none';
        }

        function excelToArray(text) {
            let data = [];
            const tab = '\\t';
            const yenisatir = '\\n';

            text.split(yenisatir).forEach(s => data.push(s.split(tab)));

            return data;
        }

        function excelToTable(text) {
            const data = excelToArray(text);

            let tableHTML = '<tbody>';

            data.forEach(d => {
                tableHTML += '<tr>';
                d.forEach(c => tableHTML += `<td>${c}</td>`);
                tableHTML += '</tr>';
            });

            tableHTML += '</tbody>';

            return tableHTML;
        }
    </script>
</body>
</html>