Prasad K
Reputation: 35
Crossword puzzle using JavaScript or HTML
Please see this image to read the actual assignment
I need to make this crossword puzzle, I am totally new in IT, however I have been trying very hard to make this as I have to submit this as an assignment to get a job in web development. I am having a hard time deciding to use a HTML table with background color changed for the puzzle or do I make a javascript multidimensional array to make this crossword.
<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
width:100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid black;
}
#cross{
text-align: center;
width:30px;
height:30px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid white;
}
#buttons{
width:30%;
float: right;
}
tr{
margin: 0;
padding: 0;
border-collapse: collapse;
}
#leftBox{
float: left;
width:50%
height: 50%;
}
#rightBox{
float: left;
}
#butt{
width: 100px;
padding:20px;
}
table{
padding:20px;
}
</style>
</head>
<body>
<div id="leftBox">
<table id="puzzel">
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
</table>
</div>
<div id="rightBox">
<table>
<tr><td><input id="butt" type="submit" value="Clear All"></td></tr>
<tr><td><input id="butt" type="submit" value="Check"></td></tr>
<tr><td><input id="butt" type="submit" value="Solve"></td></tr>
<tr><td><input id="butt" type="submit" value="Clue"></td></tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
width:330px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid black;
}
#cross{
text-align: center;
width:30px;
height:30px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid white;
}
#buttons{
width:30%;
float: right;
}
tr{
margin: 0;
padding: 0;
border-collapse: collapse;
}
#leftBox{
float: left;
}
#rightBox{
float: left;
}
#butt{
width: 100px;
}
</style>
<script>
function initializeScreen(){
var puzzelTable = document.getElementById("puzzel");
var puzzelArrayData = preparePuzzelArray();
for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for(var j = 0 ; j < rowData.length ; j++){
var cell = row.insertCell(-1);
if(rowData[j] != 0){
cell.innerHTML = rowData[j];
}else{
cell.innerHTML = "1";
cell.style.backgroundColor = "black";
}
}
}
}
function preparePuzzelArray(){
var items = [ [0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, '?', 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, '?', 0, '?', 0, 0, 0, 0],
[0, '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'],
[0, 0, 0, 0, 0, 0, '?', 0, 0, 0, '?'],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
return items;
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">
</table>
</div>
<div id="rightBox">
<table>
<tr><td><input id="butt" type="submit" value="Clear All"></td></tr>
<tr><td><input id="butt" type="submit" value="Check"></td></tr>
<tr><td><input id="butt" type="submit" value="Solve"></td></tr>
<tr><td><input id="butt" type="submit" value="Clue"></td></tr>
</table>
</body>
</html>Upvotes: 0
Views: 32432
Answers (5)
Viresh Ratnakar
Reputation: 11
Please take a look at Exolve (https://github.com/viresh-ratnakar/exolve) for setting up interactively solvable crosswords very easily. Exolve is open source and free (MIT license).
With Exolve, setting up an interactively solvable crossword (with or without solutions provided) is something as simple as editing the following plain text within an HTML file:
<script>
const puzzleText = `
======REPLACE WITH YOUR PUZZLE BELOW======
exolve-begin
exolve-width: 3
exolve-height: 3
exolve-grid:
ACE
R.R
EAR
exolve-across:
1 Clue for ACE (3)
3 Clue for EAR (3)
exolve-down
1 Clue for ARE (3)
2 Clue for ERR (3)
exolve-end
======REPLACE WITH YOUR PUZZLE ABOVE======
`;
</script>
Upvotes: 1
A choubey
Reputation: 1
<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#puzzel {
width:100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid black;
}
#cross{
text-align: center;
width:30px;
height:30px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid white;
}
#buttons{
width:30%;
float: right;
}
tr{
margin: 0;
padding: 0;
border-collapse: collapse;
}
#leftBox{
float: left;
width:50%
height: 50%;
}
#rightBox{
float: left;
}
#butt{
width: 100px;
padding:20px;
}
table{
padding:20px;
}
</style>
</head>
<body>
<div id="leftBox">
<table id="puzzel">
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
<tr>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross">?</td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
<td id="cross" bgcolor="#000000"></td>
</tr>
</table>
</div>
<div id="rightBox">
<table>
<tr><td><input id="butt" type="submit" value="Clear All"></td></tr>
<tr><td><input id="butt" type="submit" value="Check"></td></tr>
<tr><td><input id="butt" type="submit" value="Solve"></td></tr>
<tr><td><input id="butt" type="submit" value="Clue"></td></tr>
</table>
</body>
</html>Upvotes: 0
Prasad K
Reputation: 35
<!DOCTYPE html>
<html>
<head>
<title>Cross word Puzzel</title>
<style>
#cross{
text-align: center;
width:30px;
height:30px;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid white;
}
#buttons{
width:30%;
float: right;
}
tr{
margin: 0;
padding: 0;
border-collapse: collapse;
}
td{
height: 30px;
width: 30px;
}
#leftBox{
float: left;
}
#rightBox{
float: left;
clear:left;
}
.butt{
height:50px;
width: 107px;
}
#puzzel{
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid black;
}
.inputBox{
width: 40px;
height:40px;
border: 1px solid black;
text-align: center;
}
#hintsTable{
width: 480px;
float: left;
clear: left;
}
</style>
<script>
//Globals
var currentTextInput;
var puzzelArrayData;
//Loads the Crossword
function initializeScreen(){
var puzzelTable = document.getElementById("puzzel");
puzzelArrayData = preparePuzzelArray();
for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
var row = puzzelTable.insertRow(-1);
var rowData = puzzelArrayData[i];
for(var j = 0 ; j < rowData.length ; j++){
var cell = row.insertCell(-1);
if(rowData[j] != 0){
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="text-transform: lowercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
}else{
cell.style.backgroundColor = "black";
}
}
}
addHint();
}
//Adds the hint numbers
function addHint(){
document.getElementById("txt_0_4").placeholder = "1";
document.getElementById("txt_2_6").placeholder = "2";
document.getElementById("txt_3_1").placeholder = "3";
document.getElementById("txt_3_9").placeholder = "4";
document.getElementById("txt_6_2").placeholder = "5";
document.getElementById("txt_9_0").placeholder = "6";
}
//Stores ID of the selected cell into currentTextInput
function textInputFocus(txtID123){
currentTextInput = txtID123;
}
//Returns Array
function preparePuzzelArray(){
var items = [ [0, 0, 0, 0, 'p', 0, 0, 0, 0, 0],
[0, 0, 0, 0, 'u', 0, 0, 0, 0, 0 ],
[0, 0, 0, 0, 'n', 0, 'b', 0, 0, 0],
[0, 'h', 'y', 'd', 'e', 'r', 'a', 'b', 'a', 'd'],
[0, 0, 0, 0, 0, 0, 'n', 0, 0, 'e'],
[0, 0, 0, 0, 0, 0, 'g', 0, 0, 'l'],
[0, 0, 'm', 'u', 'm', 'b', 'a', 'i', 0, 'h'],
[0, 0, 0, 0, 0, 0, 'l', 0, 0, 'i'],
[0, 0, 0, 0, 0, 0, 'o', 0, 0, 0],
['k', 'a', 's', 'h', 'm', 'i','r', 0, 0, 0],
[0, 0, 0, 0, 0, 0, 'e', 0, 0, 0]
];
return items;
}
//Clear All Button
function clearAllClicked(){
currentTextInput = '';
var puzzelTable = document.getElementById("puzzel");
puzzelTable.innerHTML = '';
initializeScreen();
}
//Check button
function checkClicked(){
for ( var i = 0; i < puzzelArrayData.length ; i++ ) {
var rowData = puzzelArrayData[i];
for(var j = 0 ; j < rowData.length ; j++){
if(rowData[j] != 0){
var selectedInputTextElement = document.getElementById('txt' + '_' + i + '_' + j);
if(selectedInputTextElement.value != puzzelArrayData[i][j]){
selectedInputTextElement.style.backgroundColor = 'red';
}else{
selectedInputTextElement.style.backgroundColor = 'white';
}
}
}
}
}
//Clue Button
function clueClicked(){
if (currentTextInput != null){
var temp1 = currentTextInput;
var token = temp1.split("_");
var row = token[1];
var column = token[2];
document.getElementById(temp1).value = puzzelArrayData[row][column];
//checkClicked();
}
}
//Solve Button
function solveClicked(){
if (currentTextInput != null){
var temp1 = currentTextInput;
var token = temp1.split("_");
var row = token[1];
var column = token[2];
// Print elements on top
for(j = row; j >= 0; j--){
if(puzzelArrayData[j][column] != 0){
document.getElementById('txt' + '_' + j + '_' + column).value = puzzelArrayData[j][column];
}else break;
}
// Print elements on right
for(i = column; i< puzzelArrayData[row].length; i++){
if(puzzelArrayData[row][i] != 0){
document.getElementById('txt' + '_' + row + '_' + i).value = puzzelArrayData[row][i];
}else break;
}
// Print elements below
for(m = row; m< puzzelArrayData.length; m++){
if(puzzelArrayData[m][column] != 0){
document.getElementById('txt' + '_' + m + '_' + column).value = puzzelArrayData[m][column];
}else break;
}
// Print elements on left
for(k = column; k >= 0; k--){
if(puzzelArrayData[row][k] != 0){
document.getElementById('txt' + '_' + row + '_' + k).value = puzzelArrayData[row][k];
}else break;
}
// Done!
}
}
</script>
</head>
<body onload="initializeScreen()">
<div id="leftBox">
<table id="puzzel">
</table>
</div>
<div id="rightBox">
<table>
<tr><td><input class="butt" type="submit" value="Clear All" onclick="clearAllClicked()"></td>
<td><input class="butt" type="submit" value="Check" onclick="checkClicked()"></td>
<td><input class="butt" type="submit" value="Solve" onclick="solveClicked()"></td>
<td><input class="butt" type="submit" value="Clue" onclick="clueClicked()"></td></tr>
</table>
</div>
<table id="hintsTable">
<tr>
<td><strong>Horizontal:</strong></td><td><strong>Vertical:</strong></td>
</tr>
<tr>
<td>3. Cultural Hub (Hyderabad)</td><td>1. Education Hub (Pune)</td>
</tr>
<tr>
<td>5. India's financial capital (Mumbai)</td><td>2. Information Technology Hub (Bangalore)</td>
</tr>
<tr>
<td>6. Saffron region (Kashmir)</td><td>4. Capital of India (Delhi)</td>
</table>
</body>
</html>Done!! && Done!! Thanks again Alvaro Flaño Larrondo.
Upvotes: 1
Alvaro Flaño Larrondo
Reputation: 5734
I know I'm not supposed to do this, but I loved the challenge so I came with a solution in this JSFiddle
It uses the following markup
<div id="puzzle_container">
<table id="puzzle">
</table>
</div>
<div id="hints_container">
<h3>Vertical</h3>
<div id="vertical_hints_container"></div>
<h3>Horizontal</h3>
<div id="horizontal_hints_container"></div>
</div>
<div id="buttons_container">
<button id="clear_all">Clear All</button>
<button id="check">Check</button>
<button id="solve">Solve</button>
<button id="clue">Clue</button>
</div>
And jQuery.
Upvotes: 8
Related Questions
- Puzzle using CSS and Javascript
- Word Search Game Javascript
- An interesting Javascript task
- How to add navigation functions in a crossword grid using Javascript?
- HTML & CSS Simple Crossword
- Javascript for multiple choice quiz
- Elusive text exercise (jquery/Javascript)
- Javascript with CSS
- how to create a crossword style grid / large number of divs or other?
- HTML layout for Crossword Puzzle