え

td

フロントエンドの開発を行うための基本的な構造とコードを提供します。VSCodeを使用し、Live Serverで表示を確認する方法も含めて説明します。

手順

  1. VSCodeでフォルダを開く
    作成したフォルダをVSCodeで開きます。

  2. 基本ファイルの作成
    以下の3つのファイルをプロジェクトフォルダに作成します。

    • `index.html`

    • `styles.css`

    • `script.js`

  3. コードの記述

  4. Live Serverのインストールと起動
    VSCodeでLive Server拡張機能をインストールし、`index.html`を右クリックして「Open with Live Server」を選択します。ブラウザが自動的に開き、作成したウェブページが表示されます。

これで、基本的なレビュー登録のフロントエンドが完成し、Live Serverを使用してローカルで動作を確認できます。次のステップとして、バックエンドとデータベースの連携を検討できます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Party Reviews</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Company Party Reviews</h1>
<form id="reviewForm">
<label for="restaurantName">Restaurant Name:</label>
<input type="text" id="restaurantName" name="restaurantName" required>
<label for="rating">Rating:</label>
<input type="number" id="rating" name="rating" min="1" max="5" required>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" required></textarea>
<button type="submit">Submit Review</button>
</form>
<h2>Reviews</h2>
<div id="reviews"></div>
<script src="script.js"></script>
</body>
</html>


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0 ;
}

h1, h2 {
color: #333 ;
}

form {
display: flex;
flex-direction: column;
width: 300px;
margin: 20px 0;
}

label, input, textarea, button {
margin-bottom: 10px;
}

input, textarea, button {
padding: 10px;
font-size: 1em;
}

button {
background-color: #4CAF50 ;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #45a049 ;
}

#reviews {
width: 80%;
max-width: 600px;
}

.review {
background-color: white;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.review p {
margin: 5px 0;
}


document.getElementById('reviewForm').addEventListener('submit', function(event) {
event.preventDefault();
const restaurantName = document.getElementById('restaurantName').value;
const rating = document.getElementById('rating').value;
const comments = document.getElementById('comments').value;

const review = document.createElement('div');
review.className = 'review';
review.innerHTML = `
    <p><strong>Restaurant:</strong> ${restaurantName}</p>
    <p><strong>Rating:</strong> ${rating}</p>
    <p><strong>Comments:</strong> ${comments}</p>
`;

document.getElementById('reviews').appendChild(review);

document.getElementById('reviewForm').reset();

});

いいなと思ったら応援しよう！