HTMLとJavaScriptの実装問題 | 新卒エンジニア就職ガイド | 新卒メガベンチャー・外資就活対策

HTMLとJavaScriptの実装問題

問題 1: カウンターアプリ

課題: ボタンをクリックするたびにカウンターが1ずつ増えるシンプルなカウンターアプリを作成してください。

要件:

初期カウントは0。

ボタンをクリックするたびにカウントが1増える。

現在のカウントを表示する。

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウンターアプリ</title>
</head>
<body>
    <div>
        <h1>カウント: <span id="count">0</span></h1>
        <button id="incrementBtn">カウントを増やす</button>
    </div>
    <script src="counter.js"></script>
</body>
</html>

JavaScript (counter.js):


document.addEventListener('DOMContentLoaded', () => {
    let count = 0;
    const countDisplay = document.getElementById('count');
    const incrementBtn = document.getElementById('incrementBtn');

    incrementBtn.addEventListener('click', () => {
        count++;
        countDisplay.textContent = count;
    });
});

問題 2: 簡易ToDoリスト

課題: 新しいタスクを追加できる簡易ToDoリストを作成してください。

要件:

テキストボックスにタスクを入力し、"追加"ボタンを押すとタスクがリストに追加される。

各タスクの横には削除ボタンがあり、クリックするとタスクがリストから削除される。

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoリスト</title>
</head>
<body>
    <div>
        <input type="text" id="taskInput" placeholder="タスクを入力">
        <button id="addTaskBtn">追加</button>
        <ul id="taskList"></ul>
    </div>
    <script src="todo.js"></script>
</body>
</html>

JavaScript (todo.js):


document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('taskInput');
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskList = document.getElementById('taskList');

    addTaskBtn.addEventListener('click', () => {
        const taskText = taskInput.value.trim();
        if (taskText === '') return;

        const listItem = document.createElement('li');
        listItem.textContent = taskText;

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '削除';
        deleteBtn.addEventListener('click', () => {
            taskList.removeChild(listItem);
        });

        listItem.appendChild(deleteBtn);
        taskList.appendChild(listItem);

        taskInput.value = '';
    });
});

問題 3: シンプルな電卓

課題: 基本的な加算、減算、乗算、除算ができるシンプルな電卓を作成してください。

要件:

2つの数値を入力し、演算子を選択して計算ボタンを押すと結果を表示する。

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルな電卓</title>
</head>
<body>
    <div>
        <input type="number" id="num1" placeholder="数値1">
        <select id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" id="num2" placeholder="数値2">
        <button id="calculateBtn">計算</button>
        <h2>結果: <span id="result"></span></h2>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

JavaScript (calculator.js):


document.addEventListener('DOMContentLoaded', () => {
    const num1 = document.getElementById('num1');
    const operator = document.getElementById('operator');
    const num2 = document.getElementById('num2');
    const calculateBtn = document.getElementById('calculateBtn');
    const resultDisplay = document.getElementById('result');

    calculateBtn.addEventListener('click', () => {
        const value1 = parseFloat(num1.value);
        const value2 = parseFloat(num2.value);
        const operatorValue = operator.value;

        let result;

        switch(operatorValue) {
            case '+':
                result = value1 + value2;
                break;
            case '-':
                result = value1 - value2;
                break;
            case '*':
                result = value1 * value2;
                break;
            case '/':
                result = value1 / value2;
                break;
            default:
                result = 'エラー';
        }

        resultDisplay.textContent = result;
    });
});

テック企業求人一覽

こちらの求人をrecoから紹介されたものです。 recoは現役の外資エンジニアがモックインタビュー付きで面接対策を行ってくれる転職サービスです。これらの企業にどのように準備に準備して振る舞えば採用されるのか的確なアドバイスを受ける事ができます。 InterviewCatの共著者のgaijineersさんが創業者として皆さんの転職をサポートします。